向下滚动隐藏固定标题,向上滚动显示并悬停

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

小提琴: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 ;
    }

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

希望这对你有用!