sohelamin/stick-header.html

## stick-header.html
<!DOCTYPE html>
<html>
    <header>
        <title>Stick Header</title>
        <style>
            .stick-header {
            	width: 100%;
            	z-index: 99999;
            	position: fixed;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </header>
    <body>
        <div class="header">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </div>
        <script>
    	$(document).ready(function() {
    	    var s = $("div.header");
    	    var pos = s.position();
    	    $(window).scroll(function() {
    	        var windowpos = $(window).scrollTop();
    	        //s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
    	        if (windowpos >= pos.top) {
    	            s.addClass("stick-header");
    	        } else {
    	            s.removeClass("stick-header");
    	        }
    	    });
    	});
    	</script>
    </body>
</html>