Menu icon Foundation
Build a sticky navigation with Foundation for Sites 6

Hey friends! 

We recently published a new lesson we know you'll find useful!

Build a sticky navigation with Foundation for Sites 6

 

We wrote this lesson to alleviate some confusion around the Sticky component and help you get up and running with it quickly. There seems to be some confusion around how the Sticky component works and there are opportunities to improve the functionality, syntax, or documentation. We'd love to get a discussion going on issues you have experienced or workarounds you've discovered with the F6 Sticky component.

Read the lesson here then comment on the post with questions or suggestions:

http://zurb.com/university/lessons/create-a-menu-that-sticks

stickyfixednavnavigationmenutop bratop-bar

Hey friends! 

We recently published a new lesson we know you'll find useful!

Build a sticky navigation with Foundation for Sites 6

 

We wrote this lesson to alleviate some confusion around the Sticky component and help you get up and running with it quickly. There seems to be some confusion around how the Sticky component works and there are opportunities to improve the functionality, syntax, or documentation. We'd love to get a discussion going on issues you have experienced or workarounds you've discovered with the F6 Sticky component.

Read the lesson here then comment on the post with questions or suggestions:

http://zurb.com/university/lessons/create-a-menu-that-sticks

olivier requet about 3 years ago

Hey i've tried to reproduce the code in a test page with a wordpress foundation driven theme and the nav bar does not stay sticky to top when i reach the bottom of my "content" div.

I've played with the : data-btm-anchor="content:bottom"

and it seems that when i scroll below my "content" div the nav is not sticky anymore. 

Here is my page : https://focus777.ch/grottes/

do you have any idea ?

ps: i've forked the codepen given in this tutorial and added a very long footer which render the same problem as mine.

http://codepen.io/numero7/pen/qaEpPL

 

powellian over 3 years ago

In ref to a sticky nav tut @rafi kindly posted to me and SO post I raised, I am just not getting Magellan/Sticky Nav to work in the Zurb cli template. **The SO post explains the problem fully so I feel there's no need to repeat it here.

I've followed the responses to the SO and the Codepen to the word but it's just not working and I am getting the following console log: 

Uncaught TypeError: Cannot read property 'top' of undefined [foundation.sticky.js:81]

To attempt a fix I've re-installed the Fdn CLI via npm but no joy.

It would appear all is in place for Sticky to work - I can see it registers in the DOM but it doesn't add the required sticky classes to the wrapping element.

Tbh I don't know what else to try now so can anyone advise please? I can only assume it is somehow related to the CLI install.

Thanks in advance.

Rafi Benkual over 3 years ago

@peter - thanks, that helps.

@vitaliy, thanks for the link. Looks like StickyJS has the same features and the built in Foundation sticky except it wasn't clear if it has a way to spot the stickiness at the end of an element. So things like sidebars, don't overlap footers for example. Did you see it has that?

If I'm hearing everyone right - I think the focus moving forward with Sticky is to keep the existing options, but make them less reliant on each other, simpler to just use, and document better.

We have a growing team of Yetinauts now so focussing on a specific component to make it better is next step. Your suggestions on what specific parts need to be simplified, or what use cases is most helpful.

Vitaliy Ziborov over 3 years ago

I have tested Foundation sticky  and jquery sticky  script (http://stickyjs.com/) and decide that jquery sticky  script is more stable now.

Peter Collinson over 3 years ago

Foundation sticky basically does 'better scrolling' - the easing is better.

Rafi Benkual over 3 years ago

@Peter and @chris - Thanks for the comments

Some quick take-ways from reading the comments:

- You need a simple Sticky plugin that just works

- The Foundation sticky plugin is complex and some configurations cause it stop working

- You see new issues introduced in recent releases

What's being done about this:

- In the short term we have switched from new feature development to bug fixing and shoring up stability

- We are internally focussing on testing with visual regression tests for 100's of use cases.

- JS unit tests across all the plugins

 

For this discussion, we are specifically looking to address how the sticky plugin can be more plug and play and make sure it addresses your common use cases.

 

@peter - 

You also mentioned you like the Foundation Sticky better than Sticky kit if it works. Can you elaborate on what is better about it so we make sure to keep those features or syntax the same as we work through the issues?

 

In case someone needs it:

Here is an example of the sticky side menu anchored to the ajasent column: http://codepen.io/rafibomb/pen/eZKOGp

Rafi Benkual over 3 years ago

Adam - That's an intersting use case because so many people try to do this. One thing to make sure of is that you activate the sticky on small like Val mentioned. 

data-sticky-on="small"

The trickiness of using an off-canvas with a fixed or sticky title-bar is that the off-canvas needs to push the page over. Because of this, the off-canvas part is attached to the top of the page. It is not disconnected like a position: absolute element. So when you are far down the page and open the menu, the list items may not be visible. 

That's why the force-top exists which you can turn off like 

data-force-top="false"

Do you think something like this would work better for your use case? Slide out panel

Rafi Benkual over 3 years ago

Hi Val - Thanks! That's a good option to mention because by default, sticky is not active on small.

Chris B over 3 years ago

Thanks for the tutorial Rafi.  But I'm gonna have to agree with some of the other comments.  Foundations stickyness doesn't seem to work very well.  It breaks at the slightest complications.  I've spent hours today trying to debug my own page, I used the docs, I've used this tutorial and I finally gave up and used a jquery script (http://stickyjs.com/) and that just worked with no issues.  I'm not sure why foundations sticky isn't as simple as the jquery options out there.  But until they make it "just work" I'll have to stick with 3rd party plugins.

Peter Collinson over 3 years ago

Well for me sticky has died with the 6.2 releases - and I am holding back deploying 6.2 JS until I can avoid using sticky - which I've done on one site - OR it gets fixed. So I am now using 6.2 css and 6.1 js on my sites - I really don't want to do this, but it's necessary when something that used to work no longer does.

The page layout is simple:

header

row

main column (sticky anchor)       Menu - sticky container

footer

It seems much the same as the Foundation website except I am not using Magellan.

If I take a working 6.1 js page - actually with 6.2 css - and replace the foundation/sticky code with 6.2 then scrolling of the menu just stops. I have poked at this a lot, and actually I am unconvinced that the 6.2 code is actually getting scrolling events - but I am not entirely sure.

So far, this history of 6... releases are not good. I've stopped using reveal because it is a mess and scrolls stuff off the screen. I've now replaced 'sticky' with jquery-stickykit on one site because sticky has died. Foundation sticky is better than the stickykit solution, but only when it works. PLEASE don't manage to break equalizer. This is all sort of software rot, on each release something else breaks.

Would it not have been somewhat better not to have spent time encrypting your Javascript and instead made sure that it works?

Adam over 3 years ago

Hi Rafi,

This is excellent, thank you.

Now, how do we add an off canvas menu to this?

I've tried to do this using sticky on the top-bar which sticks the top-bar but when you open off canvas and scroll the top-bar isn't sticky any more. Also if you're already half way down the page and open off canvas the top bar is no longer sticky, this is with data-force-top="false".

You'll will find numerous threads about this on the forums and there were various 'hacks' to get this working with foundation 5 each with their own annoyances, so I think a lot of people would be appreciative to see this working smoothly in zf6 as well as guide on how to do this.

Cheers,

Adam

 

Val Ery over 3 years ago

Good lesson!
Rafi, You only forgot to mention the option "data-sticky-on"