基于 Jquery Scrolltop 显示导航栏答案

【问题标题】：Show Navbar based on Jquery Scrolltop基于 Jquery Scrolltop 显示导航栏
【发布时间】：2014-01-01 21:14:43
【问题描述】：

伙计们，

我似乎无法让它工作，我确信这是因为我是 Jquery 的新手。

我要做的就是在 jquery scrolltop 返回一个等于我的标题高度的值时显示一个隐藏的导航栏。我有下面的代码试图做到这一点。有人可以帮忙吗？

var n = $('header').height();
var y = $("body").scrollTop();

/*hide the navbar*/
$('#nav').hide();

/*below is the code that is not working*/
if(y > n) {
    $('#nav').affix({
      offset: {
         top: $('header').height()
      }
    });
    $('#nav').show();
}

【问题讨论】：

能否请您添加一些标记...因为您使用$('header') 作为选择器。你是用它作为 HTML5 语义元素还是作为 div 的 id 或其他东西。
感谢 Ozgur。我用它作为 HTML5 元素

标签： jquery twitter-bootstrap scrolltop

【解决方案1】：

试试这个：

$(function(){
   var n = $('header').height();

   /*hide the navbar*/
   $('#nav').hide();

   $(window).scroll(function(){
     if($("body").scrollTop() > n) {
        //adjust you nav offset here.
        $('#nav').show();
     }
     else $('#nav').hide();
   });          
});

关于查询滚动的信息可以在这里查阅：http://api.jquery.com/scroll/

您必须在每次滚动移动时评估该条件，以便您的标题相应地出现或消失。

【讨论】：