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

问题描述

我有一个隐藏在向下滚动并在向上滚动时显示的固定标题，这一切都按预期工作。但是我也希望它能够在你把它放在位置时出现，有什么想法吗？

到目前为止：

  $（function（）{
 var lastScrollTop = 0，delta = 5; 
 $（window）.scroll（function（event）{$如果（Math.abs（lastScrollTop-st）<= delta）
 return; 
 $ b（$）; 
 $ b; $（this）.scrollTop $ b if（st> lastScrollTop）{
 //减数滚动代码
 $（＃header）。css（'visibility'，'hidden'）。hover（）
} else {
 //上卷代码
 $（＃header）.css（'visibility'，'visible'）; 
} 
 lastScrollTop = st; 
} ）; 
}）; 
  

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

解决方案

您可以尝试更改其顶部位置：
$ b $ pre $ if（st> lastScrollTop）{
//减小滚动代码
$（＃header ）.css（{top：' - 120px'}）
.hover（function（）{$（＃header）。css（{top：'0px'}）}）
} else {
// upscroll code
$（＃header）。css（{top：'0px'}）;
}


并将此添加到#header css：

  #header {
 / *您的CSS * / 
 border-bottom：2px solid＃333; 
} 
  

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

希望这适合你！

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

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

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.

Hope this works for you!

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