Sticky Header - Scroll - CSS / jQuery
12,712
Solution 1
Wrap him with a div
with id="whateveryouwannacallit"
and set:
#whateveryouwannacalltit{
position:fixed;
top:0;
left: 0;
width:100%;
}
Solution 2
Actually, you won't need wrapping. Here is the code
$(document).ready(function() {
var stuck = $('#header');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(stuck).css('position',((p)>start) ? 'fixed' : 'static');
$(stuck).css('top',((p)>start) ? '0px' : '');
});
});
Credit goes to this page: http://viralpatel.net/blogs/scroll-fix-header-jquery-facebook/
Author by
oliverbj
Updated on June 08, 2022Comments
-
oliverbj about 2 years
I wish to create a sticky header. Everytime that the user scrolls down AND the original header goes away, then the "sticky" header should kick in.
I currently use this:
$(function(){ // Check the initial Poistion of the Sticky Header var stickyHeaderTop = $('#sticky').offset().top; $(window).scroll(function(){ if( $(window).scrollTop() > stickyHeaderTop ) { //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'}); $('#sticky').addClass("sticky"); } else { $('#sticky').removeClass("sticky"); } }); });
Although, the current one add the class "sticky" whenever a user just does a scroll, and not when the original header should be gone.
Regards