最佳答案
你的主要问题是你没有使用
.offset() – 使用你的代码你只是获得相对于自身的位置,所以顶部总是变为0而底部变为2000 – 使用偏移意味着你得到相对于文档的位置所以它也考虑了其他因素.
您也无需检查底部位置.您可以使用下一部分的顶部位置.
$(document).ready(function() {
$(window).scroll(function() {
var scrollPos = $(window).scrollTop();
var page1Top = $("#sec_one").offset().top;
var page2Top = $("#sec_two").offset().top;
var page3Top = $("#sec_three").offset().top;
if (scrollPos >= page1Top && scrollPos < page2Top) {
$("#link_1").addClass("active");
$("#link_2").removeClass("active");
$("#link_3").removeClass("active");
} else {
$("#link_1").removeClass("active");
}
if (scrollPos >= page2Top && scrollPos < page3Top) {
$("#link_2").addClass("active");
$("#link_1").removeClass("active");
$("#link_3").removeClass("active");
} else {
$("#link_2").removeClass("active");
}
if (scrollPos >= page3Top) {
$("#link_3").addClass("active");
$("#link_1").removeClass("active");
$("#link_2").removeClass("active");
} else {
$("#link_3").removeClass("active");
}
});
});* {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: black;
position: fixed;
top: 0;
}
nav ul {
width: 50%;
margin: 0 auto;
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline;
width: 100%;
}
nav ul li a {
font-size: 40px;
color: white;
text-decoration: none;
}
nav ul li a {}
.sections {
width: 100%;
height: 2000px;
}
#sec_one {
background-color: blue;
}
#sec_two {
background-color: red;
}
#sec_three {
background-color: yellow;
}
.active {
background-color: #666666;
}
p {
color: white;
}