我试图将颜色更改为.nav在.past-main滚动时使用的css的颜色，#main但是由于某些原因，当我在浏览器中打开文件时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;
}
一切安好。您应该像这样添加jquery.min.js，
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
根据您对我评论的回复，这是唯一缺少的内容。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句