Menu icon Foundation
How to get the 'Sticky' feature working correctly?

I want to get the sticky functions working correctly on my site. I have added the .sticky class and the `data-sticky-container` and `data-sticky` attributes, as per the docs.

 

My HTML looks like: 

<div class="columns medium-4 medium-push-8" data-sticky-container>
  <div class="sticky column" data-sticky data-margin-top="0" >
    <!--content-->
   </div>
</div>

But this doesn't work.

Would anyone know what I am doing wrong? (Obviously, I have checked that the .js file is included).

 

Many thanks in advance!

 

sticky javascript

I want to get the sticky functions working correctly on my site. I have added the .sticky class and the `data-sticky-container` and `data-sticky` attributes, as per the docs.

 

My HTML looks like: 

<div class="columns medium-4 medium-push-8" data-sticky-container>
  <div class="sticky column" data-sticky data-margin-top="0" >
    <!--content-->
   </div>
</div>

But this doesn't work.

Would anyone know what I am doing wrong? (Obviously, I have checked that the .js file is included).

 

Many thanks in advance!

 

Brett Mason over 2 years ago

Hi Adam

Are you able to provide a link to your site so we can see whats going on? Alternatively a CodePen would do.
What you posted looks correct, so there must be something else going on. Are there any errors in the console?