我在左侧有一个侧边栏,例如:
<ul>
<li><a href="#anchor1">Anchor 1</a></li>
<li><a href="#anchor2">Anchor 2</a></li>
....
</ul>
还有右边的内容,像这样:
<h1 class="anchor-elem" id="anchor1">Anchor 1</h1>
<h1 class="anchor-elem" id="anchor2">Anchor 2</h1>
点击侧边栏链接跳转到 anchor ……没问题。我想要实现的是在这些 anchor 进入顶部滚动位置时捕获这些 anchor ,以便我可以将一个类添加到适当的 LI 元素。我想自动执行此操作,而不必指定每个元素。
例如,我找到了类似问题的答案:
$(document).ready(function(){
var section1Height = $('#section1').height();
var section2Height = $('#section2').height();
var section3Height = $('#section3').height();
$(window).scroll(function() {
var winTop = $(window).scrollTop();
if(winTop >= section1Height && winTop <= section2Height){
$('#section1').addClass("newClass").not().removeClass("newClass");
} else if(winTop >= section2Height && winTop <= section3Height){
$('#section2').addClass("newClass").not().removeClass("newClass");
} else if(winTop >= section3Height){
$('#section3').addClass("newClass").not().removeClass("newClass");
}
});
});
我想要实现的伪逻辑
$(window).scroll(function() {
if .anchor-elem is in view ->
find it's relative link on the menu and add class "active" to it
});
一个类似的例子是引导文档:http://bootstrapdocs.com/v3.1.1/docs/getting-started/
我查看了他们的词缀代码,但很困惑,因为它与大量其他功能交织在一起。
有没有简单的方法可以做到这一点?不使用 bootstrap.js
最佳答案
假设您已经在使用 jQuery,您可以获得每个元素的 .offset()
并检查窗口顶部是否低于 .offset()
。不要在每次滚动时获取 offset()
,因为这是一个非常昂贵的操作。我建议在页面加载时执行此操作,如果可能的话,将值保存到数组中,然后检查数组。如果您认为用户会调整窗口大小,这会影响偏移量,请在加载和调整大小时执行此操作。这是一个例子:http://jsfiddle.net/qars0w0o/3/
关于javascript - 如何根据事件 anchor 自动将类添加到链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28681694/