我想使用 Jquery 根据用户滚动的距离在我的 anchor 链接上添加类。我能够添加类,但不会使用 removeClass
将其删除。我确定问题是我在 jquery 中使用的选择器。我是否需要向后遍历并从父元素添加特定选择器,而不是直接在我的 anchor 链接上分配 removeClass
。
我不想将类添加到列表元素,而是将类应用到 anchor 链接本身,这是我个人的选择。
HTML
<ul>
<li><a class="scroll" href="#first">About Me</a></li>
<li><a class="scroll" href="#second">Portfolio</a></li>
<li><a class="scroll" href="#third">Contact</a></li>
</ul>
<div class="home" style="height:1000px; background-color:red;"></div>
<div class="about-me" id="first" style="height:1000px; background-color:green;"></div>
<div class="portfolio" id="second" style="height:1000px; background-color:blue;"></div>
<div class="contact" id="third" style="height:1000px; background-color:orange;"></div>
CSS
.active {
color:gray;
}
JQUERY
$(document).ready(function(){
var scrollLink = $('.scroll');
scrollLink.click(function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000)
})
$(window).scroll(function(){
var scrollLoc = $(this).scrollTop();
scrollLink.each(function(){
var traverse = $(this.hash).offset().top - 20;
if (traverse <= scrollLoc){
$(this).addClass('active');
$(this).removeClass('active');
}
})
})
})
我希望来自其他 anchor 链接的类在未显示在屏幕上时会被删除。
最佳答案
我想你可能想更改以下代码
if (traverse <= scrollLoc){
$(this).addClass('active');
$(this).removeClass('active');
}
像这样:
if (traverse <= scrollLoc){
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
关于jquery - 遍历父级并使用 ($this) 转到其所有子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54144682/