Question

我访问jquery库和我的jquery代码的html代码在这里：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script src="script.js"></script>

我写的jQuery / javascript是这样的：

var main = function(){
    var navLocation = $('.nav').offset();
    if (navLocation.top < 0){
        $('.nav').addClass('navbar-fixed-top')
    }
}
$(document).ready(main);

我试图做的是当你滚动它时导航栏粘在页面的顶部，而是简单地滚动页面正常。我认为浏览器忽略了代码，因为我要么搞砸了访问jQuery库，要么因为我亲自编写的代码中的错误。如果有人能帮我解决这个问题，我将非常感激。

Answer 1

当您的文档准备就绪时，您的代码只被调用一次。如果此时.nav未滚动到负数，则不会添加该类;否则会。如果要让它动态响应，则需要安装scroll事件处理程序。在这种情况下，您可能还希望有一个案例，您将删除该类。

Answer 2

问题

只有在加载DOM后才会调用main()函数，因此navLocation值可能为0.此后您的函数将不再执行，因此您永远不会添加{ {1}}类'navbar-fixed-top'菜单。

解决方案

要解决这种情况，请尝试更换主要功能，如下所示：

.nav

解释

我已将滚动处理程序附加到窗口，因此当用户滚动此事件时会被触发，允许您计算是否需要在标题中添加或删除该类。

替代

我提供的Javascript应该解决您遇到的问题，但我建议您使用纯CSS查看粘性标头，因为您不希望在加载任何UI元素时依赖于Javascript。

即使像var main = function(){ $( window ).scroll(function() { if ($('.nav').offset().top < 0){ $('.nav').addClass('navbar-fixed-top'); }else{ $('.nav').removeClass('navbar-fixed-top'); } }); }这样的解决方案也会比摆弄Javascript更好。

浏览器忽略jQuery / javaScript（bootstrap）

2 个答案:

问题

解决方案

解释

替代