Problems modifying responsive sticky navbar

Hi there everyone!

I’m trying to modify this example in the following way: I would like to have the navbar below the site’s logo and then when the page is scrolled, it sticks once it makes it to the top of the window. Currently, I’ve only been able to get it to stick to the same location on the page where it spawned.

Here’s my current iteration:

I’ve tried to modify the code to localize all pertinent code, but I might have missed something.

Could someone perhaps explain how I might get the hoped-for result?

Hi schwim,

I made an example for you:

The general idea is to remember original top offset (Y-coordinate) of the bar and then listen for its changes (during the scroll). If it gets lower than zero, that means top edge of the bar goes off screen. When it happens, apply sticky class to the bar to give it fixed position at the top.

1 Like

Just to add to @megazoid’s explanation, you might also apply a “spacer” which becomes visible when the nav bar becomes sticky to prevent jumping of the content… (forked fiddle)

(edited to fix link)

Thank you guys, very much for your help! I’ve implemented the changes and it’s sticking properly but it’s exhibiting some strange behavior when I insert the link structure. The nav bar goes about half height, cutting the words in half until it sticks to the top, at which time it goes full height.

I’m not sure if this is a js or css issue. If need be, I’d be happy to start a new topic in the CSS cat.

Thanks for your time!

The famous problem with floating elements inside block container.


overflow: hidden

to #navigation to fix that

Are you planning on having that be a dropdown at some point? If so, you might want to do the clearfix instead of overflow:hidden;.

Thanks very much for the help, I appreciate it!

I’ve got one more issue that I’ve found that I’m unable to figure out. If this page loads in a mobile size, the body’s content pushes up into the logo and navigation’s space. An image for explanation below. What would I need to do to fix this?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.