1

我试图让我的顶部导航栏在向下滚动至少 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;
}
4

1 回答 1

4

没有深入了解它是如何在他们的最终实施的。您可以使用 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/

于 2013-07-26T00:18:45.130 回答