Menu icon Foundation
Foundation 6 Sticky Not Working

I've spent hours trying to get Foundation 6.1.2 to work with Sticky but it doesn't work as expected, at all. I had no problems at all with Foundation 5 and Sticky.

My example page is here:
http://beta.garageliving.com/toronto/products/garage-wall-storage/

I have some sub navigation that I want to stick to the top of the page. When I start to scroll, my sub navigation disappears and after scrolling down it reappears and sticks. I don't want it to disappear.

I'm following the example in the Docs.

I can't get my subnav div to scroll and then stick. Here is an example of what I would LIKE to do using Foundation 5:
http://www.garageliving.com/products/garage-wall-organizers/

Any ideas?

<div data-sticky-container>
  <div id="subnavbar" class="sticky" data-sticky data-options="marginTop:0;" style="width:100%">

    <div class="row section-nav">
      <div class="small-12 columns">
        <a href="/toronto/products/garage-wall-storage/" class="selected">Overview</a>
        <a href="/toronto/products/slatwall-panels/">Slatwall Panels</a>
        <a href="/toronto/products/slatwall-accessories/">Slatwall Accessories</a>
        <a href="/toronto/products/storage-racks/">Specialty Racks</a>
        <a href="/toronto/products/hose-reels/">Hose Reels</a>
      </div>
    </div>

  </div>
</div>

            

         

foundation 6sticky

I've spent hours trying to get Foundation 6.1.2 to work with Sticky but it doesn't work as expected, at all. I had no problems at all with Foundation 5 and Sticky.

My example page is here:
http://beta.garageliving.com/toronto/products/garage-wall-storage/

I have some sub navigation that I want to stick to the top of the page. When I start to scroll, my sub navigation disappears and after scrolling down it reappears and sticks. I don't want it to disappear.

I'm following the example in the Docs.

I can't get my subnav div to scroll and then stick. Here is an example of what I would LIKE to do using Foundation 5:
http://www.garageliving.com/products/garage-wall-organizers/

Any ideas?

<div data-sticky-container>
  <div id="subnavbar" class="sticky" data-sticky data-options="marginTop:0;" style="width:100%">

    <div class="row section-nav">
      <div class="small-12 columns">
        <a href="/toronto/products/garage-wall-storage/" class="selected">Overview</a>
        <a href="/toronto/products/slatwall-panels/">Slatwall Panels</a>
        <a href="/toronto/products/slatwall-accessories/">Slatwall Accessories</a>
        <a href="/toronto/products/storage-racks/">Specialty Racks</a>
        <a href="/toronto/products/hose-reels/">Hose Reels</a>
      </div>
    </div>

  </div>
</div>

            

         
Rafi Benkual over 2 years ago

It's hard to tell. I brought up the inspector to see what changes when it un-sticks but then the page is shorter and it doesn't happen.

From what I can tell, the sticky plugin needs to know when it should end and start. This worked for me:

<div data-sticky-container data-top-anchor='1' data-btm-anchor='root:bottom'>

Jay Kerr over 2 years ago

Thanks for looking Rafi. Unfortunately that change didn't work for me but I did find a solution on CodePen which is located here:

http://codepen.io/eric-rihlmann/pen/wMpzQm

I adapted the code to my site and everything works now. If anyone is interested they can see an example here:

http://beta.garageliving.com/toronto/products/garage-wall-storage/

Tom Raine 5 days ago

Looks like an old thread that I came across when having the same problem myself. I am using SASS in my project and found that I needed to include Motion UI in my project for this, along with orbit to work.

https://foundation.zurb.com/sites/docs/motion-ui.html for a way to include in your project.

Hope this helps