How do I create a header that rolls into a sticky nav bar?

Question

I would like to create a header that contains graphics/images and when the user scrolls down to view the page content, the header starts off at the base and then becomes fixed at the top of the screen.

Here is an example: http://www.thinkful.com/learn/javascript-best-practices-1/

How would I create this?

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include **attempted solutions**, **why they didn't work**, and the expected results. — showdev, Oct 07 '13 at 23:49
i've looked on google and haven't found any tutorials. I have no idea where to begin. — Jay, Oct 07 '13 at 23:50
@Jay - Googling *"How do I create a header that rolls into a sticky nav bar?"* brings up at least three step-by-step tutorials and one stackoverflow question. — Joe, Oct 07 '13 at 23:53
Thanks @Joe. Also, I suggest that you check the "related" sidebar on this page. — showdev, Oct 07 '13 at 23:54
NO idea where I was looking. I made a big mistake, thank you. — Jay, Oct 07 '13 at 23:56
@Jay - no problem, I'd recommend taking a look at this one in particular: http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/ - it uses the waypoints plugin mentioned in an answer. — Joe, Oct 07 '13 at 23:57

score 2 · Accepted Answer · answered Oct 07 '13 at 23:49

2

I have used jQuery Waypoints (http://imakewebthings.com/jquery-waypoints/) with a lot of success.

answered Oct 07 '13 at 23:49

Kate McCubbins

793
4
9

score 2 · Answer 2 · edited May 23 '17 at 12:21

2

By checking scrollTop(). You could easily have searched for this. How to build simple sticky navigation with jQuery?

edited May 23 '17 at 12:21

Community

1
1

answered Oct 07 '13 at 23:50

Colandus

1,634
13
21

score 1 · Answer 3 · answered Oct 08 '13 at 00:13

Using jQuery:

With $(window).on('scroll',function(){ /*your code*/ }); you can bind a function to the scroll event.
Inside that function use document.scrollTop to know the current vertical position of the scroll bar
Change the css of the header and the side menu with .css() or .addClass()
Finally with the HTML5 History API you can change the URL without loading the page using the history.replaceState() method.

I've just forked a plugin called Scrollit.js that does the job. The original version from Chris Polis works great but doesn't change the URL. My version does change the URL has't been completely tested.

How do I create a header that rolls into a sticky nav bar?

3 Answers3