Question

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

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

Answer 1

不要过于深入地了解它是如何实施的。你可以使用跟踪滚动位置和渲染更改的组合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/

如何在向下滚动时隐藏标题，并在向上滚动5倍（如google +）？

1 个答案: