← Back to Upcase

Sticky Navbar


(Scott Hollinshead) #1

@kylefiedler I am not sure if I named this post correctly but I was wondering how do you get it so the navbar sticks to the top of the page after scrolling down a little bit like you do on the thoughtbot website and on the forum.

Thanks!


(Andrew Cohen) #2

Hi @scott! As the designer that wrote the html/css/js for that I figured I’d dive in to help you out.

The CSS for the navigation is pretty straight forward in that it’s position absolute within the top banner by default. Upon scrolling a little jQuery checks to see if you’ve scrolled past the height of the window and if so it adds a class of “showing” to the navigation. Upon doing this the navigation becomes position fixed and the background color appears. It appears to animate with a little CSS3 transition help.

I created a gist with the jQuery I used for you to check out. The CSS you can check out via web inspector, but if you have any questions please reach back out and I’ll help!


(Scott Hollinshead) #3

@andrewcohen Thanks for your help, sorry I have only just got back to you, I was unfortunate to get man-flu, will try this out tonight!

Thanks again :grin: