Hide fixed header on scroll down, show on scroll up and hover
13,317
You may try change its top position instead:
if (st > lastScrollTop){
// downscroll code
$("#header").css({top:'-120px'})
.hover(function(){$("#header").css({top: '0px'})})
} else {
// upscroll code
$("#header").css({top:'0px'});
}
And add this to #header css:
#header{
/*YOUR CSS*/
border-bottom: 2px solid #333 ;
}
That way you can hover over the header's bottom border and show it.
Hope this works for you!
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Author by
Admin
Updated on June 16, 2022Comments
-
Admin about 2 years
I have a fixed header that hides on scroll down and shows again on scroll up, this all works as intended. But I'd also like it to show up when you hover it's position, any ideas?
What I got so far:
$(function(){ var lastScrollTop = 0, delta = 5; $(window).scroll(function(event){ var st = $(this).scrollTop(); if(Math.abs(lastScrollTop - st) <= delta) return; if (st > lastScrollTop){ // downscroll code $("#header").css('visibility','hidden').hover () } else { // upscroll code $("#header").css('visibility','visible'); } lastScrollTop = st; }); });
Fiddle: http://jsfiddle.net/r6kTs/