Question

当我滚过.nav时，我正尝试将.past-main的颜色更改为#main中使用的css但是，由于某种原因，当我打开时，javascript无效我的浏览器中的文件。没有语法错误或任何迹象表明我的代码有问题。所以我不知道还能做什么。这是我的代码：

HTML：

<head>
    <meta charset="utf-8">

    <title>Untitled Document</title>
    <link rel="stylesheet" href="mooss.css">

</head>

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

    <script>
        // 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

        $(document).ready(function() {

            var mainbottom = $('#main').offset().top + $('#main').height();

            // on scroll, 
            $(window).on('scroll', function() {

                // we round here to reduce a little workload
                stop = Math.round($(window).scrollTop());

                if (stop > mainbottom) {
                    $('.nav').addClass('past-main');
                } else {
                    $('.nav').removeClass('past-main');
                }

            });

        })
    </script>

</body>

这是css：

.nav {
    background-color: transparent;
    color: #fff;
    transition: all 0.25s ease;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ccc;
    padding: 1em 0;
         /* make sure to add vendor prefixes here */;
}

.nav.past-main {
    background-color: #fff;
    color: #444;
}

#main {
    height: 500px;
    background-color: red;
}

#below-main {
    height: 1000px;
    background-color: #eee;
}

Answer 1

尝试删除class="nav"并通过nav访问，而不是.nav

// 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

$(document).ready(function() {

    var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll',function(){

    // we round here to reduce a little workload
    stop = Math.round($(window).scrollTop());

if (stop > mainbottom) {
        $('nav').addClass('past-main');
    } else {
        $('nav').removeClass('past-main');
   }

});

})

 nav {
background-color:transparent;
color:#fff;
transition: all 0.25s ease;
position:fixed;
top:0;
width:100%;
background-color:#ccc;
padding:1em 0;
/* make sure to add vendor prefixes here */
 }

  nav.past-main {
    background-color:#fff;
    color:#444;
  }

  #main {
   height:500px;
   background-color:red;
  }

 #below-main {
  height:1000px;
  background-color:#eee;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav>
  <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

</body>

Answer 2

一切都很好。你应该像这样添加jquery.min.js，

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

根据您对我的评论的回复，这是唯一遗漏的内容。

Javascript代码无效

2 个答案: