Question

我尝试使用this example向网页添加收缩滚动导航栏，但是当我将其Javascript和CSS规则复制到我的文档时，它就不再有用了。收缩类不会像我们的演示一样添加到我的<nav>元素中。当我下载他们的演示代码时，尽管在在线示例中工作，但它也没有工作。

这是我使用过的JavaScript：

$(document).ready(function() { 
    $(window).scroll(function() {
        if ($(document).scrollTop() > 50) {
            $('nav').addClass('shrink');
        } else {
            $('nav').removeClass('shrink');
        }
    }); 
});

我还尝试使用此脚本删除第一行（和最后一行），如示例中其他地方所示。

我能想到的唯一答案是Chrome拒绝在本地文件上执行JavaScript。是这样的，还是我错过了什么？

Answer 1

确保在外部js文件之前将jquery包含在html中，例如：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

虽然看起来你已经找到了问题 - 但只是一个小建议就是尝试编写这样的代码 - 看起来会好得多：）

$(window).scroll(function(){

    var liveview = $(document).scrollTop();  

    if (liveview > 120) {
        $("nav").addClass("shrink");
    } else {
        $("nav").removeClass("shrink");
    }
});

使用JavaScript缩小导航栏

2 个答案: