Responsive Websites and Static Headers

Written by

So one of the websites I am developing has a static header, there are a few examples of this being used such as Next; the issue comes, when you require lots of information in this header but use a responsive layout, the header is then taking up real estate for your main content (even more so in landscape mode).

So this is where hiding the less vital information such as the company logo and search could come in useful; so I developed a small hacky jquery base script to do this. It isn’t perfect and it’s my first serious javascript on this site so please be kind!

The script hides a div on scroll and displays another to allow you to have a small “show div” button available at all times. if then shows and hides when the display is resizes to a desktop resolution.

Have a go of the demo and feel free to steal the code; if you find any better ways of doing it then don’t hesitate to contact me.