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

我有一个固定的标题，隐藏在向下滚动并再次向上滚动显示，这一切都按预期工作。 但是当你徘徊它的位置，任何想法时，我也希望它出现？

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

$(function(){ var lastScrollTop = 0, delta = 5; $(window).scroll(function(event){ var st = $(this).scrollTop(); if(Math.abs(lastScrollTop - 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 ; } 

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

希望这对你有用！

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

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

更新小提琴