我正在制作一个网页,其顶部有一个链接到网页上不同 div 的 anchor 按钮,我想在该 div 上滚动时更改按钮的背景颜色并保持该颜色直到它到达后续部分.如何在其中使用 toggleClass?
最佳答案
试试这个。事件链接具有绿色背景。
$(window).scroll(function(){
var oneH = $('#one').offset().top;
var twoH = $('#two').offset().top;
if ($(window).scrollTop() >= oneH){
$("header a").removeClass("active");
$("header a#aone").addClass("active");
}
if ($(window).scrollTop() >= twoH){
$("header a").removeClass("active");
$("header a#atwo").addClass("active");
}
});
.sect{
width:100%;
height:600px;
background-color:yellow;
}
#two{
background-color:blue;
}
header{
position:fixed;
top:0;
}
header a{
display:inline-block;
width:50px;
border:1px solid black;
text-align:center;
background-color:red;
}
header a.active{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="aone" class="active">div1</a>
<a id="atwo">div2</a>
</header>
<div class="sect" id="one"></div>
<div class="sect" id="two"></div>
关于jquery - 使用 jquery 在 div 上滚动时更改 anchor 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41660158/