jquery - 向下滚动时隐藏固定标题，向上滚动和悬停时显示

Question

我有一个固定标题，它在向下滚动时隐藏并在向上滚动时再次显示，这一切都按预期工作。但我也希望当你将鼠标悬停在它的位置时它会出现，有什么想法吗？

到目前为止我得到了什么:

$(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/

Answer 1

您可以尝试更改其顶部位置:

if (st > lastScrollTop){
       // downscroll code
       $("#header").css({top:'-120px'})
       .hover(function(){$("#header").css({top: '0px'})})
   } else {
      // upscroll code
      $("#header").css({top:'0px'});
   }

并将其添加到#header css:

#header{
    /*YOUR CSS*/
    border-bottom: 2px solid #333 ;
    }

这样您就可以将鼠标悬停在标题的底部边框上并显示它。

希望这对您有用!