我正在尝试对 FAQ 页面侧边导航中的链接产生“活跃”效果，因此当用户滚动时，他们所在的部分会突出显示。我试过几种不同的技术，但似乎没有任何效果。
我目前正在使用这个:
$('.sidenav li').click(function() {
$('.sidenavlinks li').removeClass('highlight');
$(this).addClass('highlight');
});
这是我目前拥有的:jsfiddle
最佳答案
类似的东西？
$('#firstlink').addClass('active');
$(window).scroll(function(){
$('.active').each(function(){
$(this).removeClass('active');
});
var scrollTop = $(window).scrollTop();
// if (scrollTop > $("#fifth").position().top)
if($(window).scrollTop() + $(window).height() == $(document).height())
$('#fifthlink').addClass('active');
else if (scrollTop > $("#fourth").position().top)
$('#fourthlink').addClass('active');
else if (scrollTop > $("#third").position().top)
$('#thirdlink').addClass('active');
else if (scrollTop > $("#second").position().top)
$('#secondlink').addClass('active');
else
$('#firstlink').addClass('active');
});#sidenav{
float: left;
position: fixed;
height: 300px;
width: 180px;
border: 1px solid #c0914c;
}
.title{
float: left;
clear: both;
text-decoration: none;
padding: 5px;
margin: 5px 0px;
font-size: 20px;
width: 170px;
text-decoration: none;
}
.active{
color: white;
background-color: green;
}
#main{
float: right;
height: 800px;
margin-top: 0px;
}
.maindiv{
height: 200px;
width: 250px;
padding: 20px 10px;
margin: 5px 0px;
}
#first{
background-color: #444;
}
#second{
background-color: #bcbc93;
}
#third{
background-color: #de5546;
}
#fourth{
background-color: #eeff56;
}
#fifth{
background-color: #554467;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="sidenav">
<a href="#first"><span class="title" id="firstlink">Line One</span></a>
<a href="#second"><span class="title" id="secondlink">Line Two</span></a>
<a href="#third"><span class="title" id="thirdlink">Line Three</span></a>
<a href="#fourth"><span class="title" id="fourthlink">Line Four</span></a>
<a href="#fifth"><span class="title" id="fifthlink">Line Five</span></a>
<div id="slidebg"></div>
</div>
<div id="main">
<div id="first" class="maindiv"></div>
<div id="second" class="maindiv"></div>
<div id="third" class="maindiv"></div>
<div id="fourth" class="maindiv"></div>
<div id="fifth" class="maindiv"></div>
</div>
<div id="footer">
</div>
</body>关于jquery - 在 Stationary SIde Nav 中突出显示事件 anchor 链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28613509/