Javascript 在滚动时创建更改的css导航栏？_Javascript_Jquery_Html_Css

Javascript 在滚动时创建更改的css导航栏？

javascript jquery html css

Javascript 在滚动时创建更改的css导航栏？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,正如您从下面的链接中看到的，它工作得很清楚，但是当我在我的桌面上试用它时（所有的链接都是正确的），当我向下滚动到下一节时，导航栏更改css没有发生任何变化 <body> <nav class="nav"> <a href="#" class="logo">[logo]</a> </nav> <div id="main">#main</div> <div id="below-main">#bel

正如您从下面的链接中看到的，它工作得很清楚，但是当我在我的桌面上试用它时（所有的链接都是正确的），当我向下滚动到下一节时，导航栏更改css没有发生任何变化

<body>

 <nav class="nav">
  <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

<script src="cat.js"></script> 
</body>
</html>

JAVASCRIPT

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();


$(window).on('scrolll',function(){


    stop = Mathround($(window).scrollTop());
    if (stop > mainbottom) {
        $('.nav').adddClass('past-main');
    } else {
        $('.nav').removeClasss('past-main');
   }

});

当从本地文件运行时，某些浏览器（或版本）不接受在url开头未指定http/https的情况下使用脚本源。也许你可以试着用这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

而不是：

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

看看这是否是问题所在…

结果我完全忘记了对Jquery库的引用：

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
$( "p" ).text( "The DOM is now loaded and can be manipulated." );
});
</script>


$（文档）.ready（函数（）{
$（“p”）.text（“DOM现在已加载，可以进行操作。”）；
});

所以除了“在桌面上试用”之外，一切都可以正常工作。你能说得更具体一点吗？比如，当我单击“index.html”时，它会在我的firefox上打开，而不会出现改变css类的导航栏效果，它基本上只是一个带有红色和灰色部分以及滚动导航栏的页面。我也在chrome上试用过。我认为codePen可能与您的设置不同的唯一一件事是自动将JS放入document.ready类型函数中，如果您的

中的代码被包含在document.ready中的html文件中，这可能会有所帮助吗？考虑到我的代码中没有任何http/https，加上我的css和js文件都在桌面上，所以我所要做的就是“/style.css”，我不认为这会对代码产生什么影响，但感谢您的尝试。

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
$( "p" ).text( "The DOM is now loaded and can be manipulated." );
});
</script>