Menu icon Foundation
A very "sticky" question

I have a question concerning sticky plugin. I am using this code:

<div class="grid-x img-front">
 <div class="cell" id="anchor1">
  <img src="@asset('images/img-front.jpg')">
 </div>
 <div class="cell" data-sticky-container>
  <div class="sticky" data-sticky data-anchor="anchor1">
   <a href="page1"><p>Some text here</p></a>
  </div>
 </div>
</div>

The idea is to have an image and over this image to have a text box with a link to another page. The text box would stick only to the image. This code works perfectly, but I would like the text box to be anchored at 0.5rem from the bottom point of #anchor1. At the moment the box get's anchored when it reaches the bottom of the image but invades a bit into the next section. So I would like to try to have a higher control over when the sticky element is anchored. Is it possible?

 

sticky

I have a question concerning sticky plugin. I am using this code:

<div class="grid-x img-front">
 <div class="cell" id="anchor1">
  <img src="@asset('images/img-front.jpg')">
 </div>
 <div class="cell" data-sticky-container>
  <div class="sticky" data-sticky data-anchor="anchor1">
   <a href="page1"><p>Some text here</p></a>
  </div>
 </div>
</div>

The idea is to have an image and over this image to have a text box with a link to another page. The text box would stick only to the image. This code works perfectly, but I would like the text box to be anchored at 0.5rem from the bottom point of #anchor1. At the moment the box get's anchored when it reaches the bottom of the image but invades a bit into the next section. So I would like to try to have a higher control over when the sticky element is anchored. Is it possible?