I found this website today http://www.forward-thinker.co.uk/. Does anyone know how to make a sticky header like this.?
9
-
4Firefox + Firebug = find out how it worksRichard H– Richard H2011-08-02 13:49:29 +00:00Commented Aug 2, 2011 at 13:49
-
2or Internet Explorer + F12 :-P2GDev– 2GDev2011-08-02 13:54:51 +00:00Commented Aug 2, 2011 at 13:54
-
I tried this, if I disable JS then it doesn't work. If you use firebug or chrome dev tools you can't remove the JS code without refreshing the page which puts it all back.DaveS– DaveS2011-08-02 13:55:56 +00:00Commented Aug 2, 2011 at 13:55
-
@DaveS, you wont be able to disable JS and have it work. For graceful degradation, just leave the header at the top of the page.zzzzBov– zzzzBov2011-08-02 14:08:56 +00:00Commented Aug 2, 2011 at 14:08
-
Thy shalt view source! You know what, web development is screwed up, whatever you do, you have to publish your actual code and people can see it, try doing the view source.Kumar– Kumar2011-08-02 14:12:49 +00:00Commented Aug 2, 2011 at 14:12
|
Show 4 more comments
1 Answer
That particular site utilizes jQuery's $(window).scroll event. It checks if the top of the scrolled-to area ($(this).scrollTop();) is below a certain height. If so, it adds to css of the header a class containing position:fixed (it also changes its height, since only part of the header scrolls). If the scrolled-to area is nearer to the top, the script removes the class containing position:fixed from the header's css and changes the height back to its original value.
4 Comments
zzzzBov
As a recommendation, I would suggest toggling a class on the header using the
scroll event. Keep the CSS where it belongs in css files.
NickAldwin
@zzzzBov Great suggestion! That's actually what the site does. Updating answer...
zzzzBov
@NickAldwin, I'm not seeing the class change in Firebug.
NickAldwin
@zzzzBov I see it in Chrome... The relevant part of the js can be seen here pastebin.com/pACGhtem (line 171)