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

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

希望这适合你！

Answer 2

您可以使用event对象的clientY属性尝试以下操作来检查鼠标相对于视口的位置。

$(document).on('mousemove',function(e){
    var hidden = ($("#header").css('visibility')!='visible');
    console.log(hidden);
    if(e.clientY <70 && hidden)
        $("#header").css('visibility','visible');
    else if(e.clientY >70 && !hidden)
        $("#header").css('visibility','hidden');
});

不确定这是否是最好的方法（在主流浏览器的最新版本中测试，但不是最老版本）

Updated Fiddle

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

2 个答案: