7

I found this website today http://www.forward-thinker.co.uk/. Does anyone know how to make a sticky header like this.?

DaveS
  • 81
  • 1
  • 3
  • 4
    Firefox + Firebug = find out how it works – Richard H Aug 02 '11 at 13:49
  • 2
    or Internet Explorer + F12 :-P – 2GDev Aug 02 '11 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 Aug 02 '11 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 Aug 02 '11 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 Aug 02 '11 at 14:12
  • @Kumar the source is obfuscated... http://pastebin.com/pACGhtem – NickAldwin Aug 02 '11 at 15:39
  • @NickAdlwin, no source on any webapge is obfuscated if you want to read it, it can be made complex like Google does but we know, it can be read and understood :-) BTW, you already helped DaveS – Kumar Aug 02 '11 at 15:57
  • it turns out that @nickAdlwin's beautifier died in between, here is the my take, clean code http://pastebin.com/Q6gncpiL – Kumar Aug 02 '11 at 16:03
  • By turning JS off, I mean I know it's done using JS and not just CSS. A javascript solution is fine, and I've nearly got it working!!! :) – DaveS Aug 03 '11 at 08:31
  • Possible duplicate of [How to create sticky header bar for a website](https://stackoverflow.com/questions/13212624/how-to-create-sticky-header-bar-for-a-website) – Nobody Sep 11 '19 at 19:18

2 Answers2

8

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.

NickAldwin
  • 11,584
  • 12
  • 52
  • 67
3

It's a technique called "sticky scroll" or "scroll follow"

I found some tutorials for you:

On Nettuts

or here

or here

or here

or here

and there's a resource here:

Jquery Stalker

Rdpi
  • 609
  • 1
  • 5
  • 13