DigitalPoint Header and Navbar

Hello,
I would like to make a similar header and navbar to DP.

When you are on the top, the navbar is below header (logo)
When you scroll down, the navbar is stay fixed.

Can someone suggest how to make it?
Thank you

 

To create something like this you need to use a combination of CSS and JS (jQuery my choice).

You can detect the scroll using this part of jQuery: http://api.jquery.com/scroll/

When the user scrolls you should change the properties of the header (or whatever you call it) to position fixed. When the scroll is at the top you revert the css back to what it was originally.

Hope that makes sense.

 

You don't need to waste any steenking jQuery on this... I'd run this anonymous function right before </body> to attach a handler.

(function() {
	var
		w = window, d = document, de = d.documentElement,
		fix = d.getElementById('scrollHeading'),
		logo = d.getElementById('logo');

	function scrollHandler() {
		fix.className = (
			typeof(w.pageYOffset) != 'undefined' ? w.pageYOffset : (
				de.clientHeight ? de : d.body
			).scrollTop
		) > (logo.clientHeight || logo.offsetHeight) ? 'fixedHeading' : '';
	}

	if (w.addEventListener) {
		w.addEventListener('scroll',scrollHandler,false);
	} else w.attachEvent('onscroll',scrollHandler);

})();

Code (markup):

Adds a class when the window is scrolled farther than #logo's height. Works all the way back to IE7. For CSS you'd simply have:

.fixedHeading {
	position:fixed;
	top:0;
	left:0;
	width:100%;
}

Code (markup):

I put together a simple demo of it in action here:
http://www.cutcodedown.com/for_others/mokujin/fixedHeader/template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/mokujin/fixedHeader/

Is wide open for easy access to the gooey bits and pieces (feel free to look around). Tested working all modern browers as well as all the way back to IE7. (position:fixed doesn't work in IE6 or lower, OH WELL!)

Hope this helps. (and steers you away from that bloated blight upon the Internet known as jQuery)