滚动到达某个元素时的那些触发器在重新调整浏览器大小时不起作用，但如果在重新调整大小后重新加载则起作用。那么如何使触发器即使在浏览器重新调整大小后也能工作，我猜这会弄乱 div 的位置？
#main {
width: 100%;
}
nav {
position: fixed;
top: 5%;
height: 30%;
text-align: center;
display: block;
z-index: 999;
width: 100%;
}
nav a {
font-size: 20px;
font-family: 'Montserrat';
color: #808080;
text-decoration: none;
text-transform:uppercase;
opacity: 0.9;
word-spacing: normal;
display:inline-block;
width: 176px;
height: 30px;
padding-top: 7px;
z-index: 999;
}
html,body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#test {position:
relative;
width: 100%;
height: 100%;
background-color: #ffd800;
}
#test2 {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #b6ff00;
}
#test3 {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #0026ff;
}
#link {
border-bottom: #0ff 2.5px solid;
}
#test4 {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #4cff00;
}
#test5 {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: #b6ff00;
}
#link:hover {
color: #aaa7a7;
}
#link2:hover {
color: #aaa7a7;
}
#link3:hover {
color: #aaa7a7;
}
#link4:hover {
color: #aaa7a7;
}#link5:hover {
color: #aaa7a7;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="smoothscroll.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var a = $('#test').offset().top;
var b = $('#test2').offset().top;
var c = $('#test3').offset().top;
var d = $('#test4').offset().top;
var e = $('#test5').offset().top;
$(document).scroll(function () {
if ($(this).scrollTop() >= a) {
$('#link').css({ "border-bottom": "#0ff 2px inset" });
}
if ($(this).scrollTop() >= b) {
$('#link2').css({ "border-bottom": "#0ff 2px inset" });
$('#link').css({ "border-bottom": "#fff" });
}
else {
$('#link2').css({ "border-bottom": "#fff" });
}
if ($(this).scrollTop() >= c) {
$('#link3').css({ "border-bottom": "#0ff 2px inset" });
$('#link2').css({ "border-bottom": "#fff" });
}
else {
$('#link3').css({ "border-bottom": "#fff" });
}
if ($(this).scrollTop() >= d) {
$('#link4').css({ "border-bottom": "#0ff 2px inset" });
$('#link3').css({ "border-bottom": "#fff" });
}
else {
$('#link4').css({ "border-bottom": "#fff" });
}
if ($(this).scrollTop() >= e) {
$('#link5').css({ "border-bottom": "#0ff 2px inset" });
$('#link4').css({ "border-bottom": "#fff" });
}
else {
$('#link5').css({ "border-bottom": "#fff" });
}
});
});
</script>
</head>
<body>
<nav>
<a id="link" href="#test" class="smoothScroll" >About</a>
<a id="link2" href="#test2" class="smoothScroll">Our aims</a>
<a id="link3" href="#test3" class="smoothScroll">App contents</a>
<a id="link4" href="#test4" class="smoothScroll">Download</a>
<a id="link5" href="#test5" class="smoothScroll">Contact us</a>
</nav>
</div>
</div>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div id="test">
</div>
<div id="test2">
</div>
<div id="test3">
</div>
<div id="test4">
</div>
<div id="test5">
</div>
</body>
</html>`
最佳答案
使用此代码 .. 创建一个带有变量的函数和 if 语句检查然后在文档就绪、窗口滚动和窗口调整大小时运行它
var a , b , c , d , e;
var changeoffset = function(){
a = $('#test').offset().top;
b = $('#test2').offset().top;
c = $('#test3').offset().top;
d = $('#test4').offset().top;
e = $('#test5').offset().top;
if ($(this).scrollTop() >= a) {
$('#link').css({ "border-bottom": "#0ff 2px inset" });
}
if ($(this).scrollTop() >= b) {
$('#link2').css({ "border-bottom": "#0ff 2px inset" });
$('#link').css({ "border-bottom": "#fff" });
}else{
$('#link2').css({ "border-bottom": "#fff" });
}
if ($(this).scrollTop() >= c) {
$('#link3').css({ "border-bottom": "#0ff 2px inset" });
$('#link2').css({ "border-bottom": "#fff" });
}else{
$('#link3').css({ "border-bottom": "#fff" });
}
if ($(this).scrollTop() >= d) {
$('#link4').css({ "border-bottom": "#0ff 2px inset" });
$('#link3').css({ "border-bottom": "#fff" });
}else {
$('#link4').css({ "border-bottom": "#fff" });
}
if ($(this).scrollTop() >= e) {
$('#link5').css({ "border-bottom": "#0ff 2px inset" });
$('#link4').css({ "border-bottom": "#fff" });
}else{
$('#link5').css({ "border-bottom": "#fff" });
}
}
changeoffset();
$(window).on('resize',changeoffset);
$(window).on('scroll',changeoffset);
关于调整浏览器大小后，Jquery 无法正常工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30824724/