如何使标题在向下滚动时隐藏，并在向上滚动5倍时显示(如google+）

How can you make a header hide on scroll down, and appear on scroll up 5x (like google+)?

本文关键字：滚动 5倍 显示 google+ 隐藏 何使 标题      更新时间：2023-09-26

我正试图让我的顶部导航栏在向下滚动至少5px后消失，并在快速向上滚动5px后重新出现。与google+标题非常相似。我尝试过搜索任何教程，也尝试过一些js和jQuery方法，但似乎无法使它们发挥作用。在我的网站上查看。

HTML:

<body>
   <div class="gridContainer clearfix">
      <nav id="topNav" class="fluid">
             <ul class="fluid fluidList navSystem">
                <li class="fluid navItem"><a href="#" title="Web">Web</a></li>
                <li class="fluid navItem"><a href="#" title="Photos">Photos</a></li>
                <li class="fluid navItem"><a href="#" title="Videos">Videos</a></li>
                <li class="fluid navItem"><a href="#" title="Music">Music</a></li>
                <li class="fluid navItem"><a href="#" title="People">People</a></li>
                <li class="fluid navItem"><a href="#" title="Places">Places</a></li>
                <li class="fluid navItem"><a href="#" title="Shopping">Shopping</a></li>
                <li class="fluid navItem"><a href="#" title="More">More...</a></li>
        </ul> 
          </nav> <!-- END #topNav -->
          <header id="header" class="fluid">
          </header> <!-- END header -->      
      </div> <!-- END .gridContainer -->
</body>

CSS：

.gridContainer {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   clear: none;
   float: none;
}
#topNav {     
   overflow: hidden; 
   width: 100%;
   height: 29px;
   margin-left: auto;
   margin-right: auto;
   position: fixed;
   top: 0;
   left: 0;
   background-color: #2D2D2D;
   z-index: 999; 
}
#header {
   position: relative;
   width: 100%;
   height: 44px;
   position: fixed;
   background-color: #D2D2D2;
}

没有深入研究它是如何在他们端实现的。您可以使用js:来跟踪滚动位置和呈现更改的组合

var scroll_pos = 0;
var scroll_time;
$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();
    if (current_scroll >= $('#topNav').outerHeight()) {
        if (current_scroll <= scroll_pos) {
            $('#topNav').removeClass('hidden');    
        }
        else {
            $('#topNav').addClass('hidden');  
        }
    }
    scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
    }, 100);
});

你必须添加css类：

#topNav.hidden {
    display: none;
}

请在此处查看其实际操作：http://jsfiddle.net/frZ9j/

相关文章：