Before scroll:
After scroll:
To obtain of sticky header effect you can use next code snippet.
1. Add CSS styles:
.persist_header_container { } .persist_header { padding: 10px; background: yellow; z-index: 1; } .floating_header { position: fixed; top: 0; visibility: hidden; -webkit-box-shadow: 0px 2px 12px 0px rgba(50, 50, 50, 1); -moz-box-shadow: 0px 2px 12px 0px rgba(50, 50, 50, 1); box-shadow: 0px 2px 12px 0px rgba(50, 50, 50, 1); }
2. Add JS code:
$(function() { $(".persist_header_container").each(function () { var header = $(".persist_header", this); header.before(header.clone()) .css("width", header.width()) .addClass("floating_header"); }); window.updateHeader = function () { $(".persist_header_container").each(function () { $(".floating_header", this) .css({"visibility": ($(window).scrollTop() > $(this).offset().top ? "visible" : "hidden")}); }); }; $(window).scroll(function () { updateHeader(); }); updateHeader(); });
Download source code: sticky_header
Also,
http://www.cssreset.com/creating-fixed-headers-with-css/
http://css-tricks.com/persistent-headers/