滚动时创建更改的css导航栏?

时间:2014-07-17 20:55:39

标签: 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">#below-main</div>

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

CSS:

/* Navigation Settings */
.nav {
    background-color:transparent;
    color:#fff;
    top:0;
    width:100%;
    height: 15%;
    background-color:#ccc;
    padding:1em 0;

    /* make sure to add vendor prefixes here */
}

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');
   }

});

2 个答案:

答案 0 :(得分:0)

当从本地文件运行时,某些浏览器(或版本)不接受使用脚本源而不在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">

并查看这可能是问题......

答案 1 :(得分:0)

原来我忘记了引用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>