向下滚动时隐藏固定标题，向上滚动和悬停时显示 [英] Hide fixed header on scroll down, show on scroll up and hover

问题描述

我有一个固定的标题，它在向下滚动时隐藏并在向上滚动时再次显示，这一切都按预期工作.但是我也希望它在您悬停它的位置时显示出来，有什么想法吗?

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;
});
});

小提琴:http://jsfiddle.net/r6kTs/

推荐答案

你可以尝试改变它的顶部位置:

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'});
   }

并将其添加到#header css:

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.

希望这对你有用！

这篇关于向下滚动时隐藏固定标题，向上滚动和悬停时显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！