我从几年前的帖子中提取了这个jQuery代码段,但我一直无法根据自己的需要对其进行调整,只是根据视图中的div以某种方式突出显示了左侧导航栏中的文本,这很可能确实是愚蠢的错误,但我只想获得一些帮助即可得到答案。不好意思,我很新!
的HTML:
<div class="navwrap">
<nav>
<ul>
<li><a href="#two" class="links">PotD </a></li>
<li><a href="#three" class="links">Description </a></li>
<li><a href="#four" class="links">Extra </a></li>
</ul>
</nav>
</div>
<div class="container" id="two">
<div class="container-2-content" id="PotD">
<h2> Aquilegia vulgaris </h2>
<h3> "common columbine" </h3>
</div>
</div>
<div class="container" id="three">
<div class="container-3-content" id="Description">
<h2> Description </h2>
</div>
</div>
<div class="container" id="four" >
<div class="container-4-content" id="Extra">
<h2> Extra </h2>
</div>
</div>
CSS:
li a:hover, li.a.active{
cursor:pointer;
font-size:30px;
font-weight: 600;
color: rgb(255, 253, 234);
border-top: 3px solid rgb(255, 253, 234);
border-bottom: 3px solid rgb(255, 253, 234);
}
jQuery的:
$(document).ready(function(){
var $sections = $('.container');
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
var $currentSection
$sections.each(function(){
var divPosition = $(this).offset().top;
if( divPosition - 1 < currentScroll ){
$currentSection = $(this);
}
var id = $currentSection.attr('id');
$('').removeClass('active');
$("[href=#"+id+"]").addClass('active');
})
});
});
It's possible you are looking for something called ScrollSpy. The bootstrap framework has it ready to go.