我正在处理一个右侧有固定菜单的页面,只要存在带有 link-list-item
类的 header ,就会生成该菜单。每当这些项目在滚动上传递时,我想用事件类更新菜单。我遇到的问题是,只有当滚动到达标题时它才会更新,之后就会被删除。我希望菜单项保持事件类,直到到达下一个标题,或者滚动点上方没有标题。按照页面的构成方式,将每个部分包装在 div 中并不是一个选项。
这是我的标记:
<div class="col-xs-6">
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<header class="header-tab-label row">
<h5 id="alaska" class="link-list-label">Alaska</h5>
</header>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<header class="header-tab-label row">
<h5 id="austin" class="link-list-label">Austin</h5>
</header>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<header class="header-tab-label row">
<h5 id="england" class="link-list-label">England</h5>
</header>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
<p>Your bones don't break, mine do. That's clear.</p>
</div>
Javascript:
(function($) {
$linklistLabel = $(".link-list-label");
$linkList = $(".link-list");
$linkListItem = $linkList.find("li");
$linklistLabel.each(function(index) {
$linkList.append('<a href="#' + $(this).text().toLowerCase() + '"><li>' + $(this).text() + '</li></a>');
});
function onScroll(event) {
var scrollPos = $(document).scrollTop();
$linkList.find('a').each(function() {
var currLink = $(this);
console.log(currLink);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$linkListItem.removeClass("active");
currLink.addClass("active");
} else {
currLink.removeClass("active");
}
});
}
$(document).ready(function() {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top + 2
}, 500, 'swing', function() {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
})(jQuery);
JSFiddle:https://jsfiddle.net/kx8Ljm9t/1/
最佳答案
编码速度非常快 - 这需要更多测试:
$linkListA = $(".link-list a");
function onScroll(event) {
var scrollPos = $(document).scrollTop();
for (var i = 0; i < $linklistLabel.length; i++) {
if ($linklistLabel.eq(i).offset().top - scrollPos < 100 &&
$linklistLabel.eq(i).offset().top - scrollPos > -100) {
$linkListA.removeClass('active');
var id = $linklistLabel.eq(i).prop('id');
$('a[href="#'+id+'"]').addClass('active');
} else if ($linklistLabel.eq(0).offset().top - scrollPos >= 100) {
$linkListA.removeClass('active');
}
}
};
我更喜欢相反的方式,这意味着在每次滚动时我都会循环遍历所有标题(而不是链接)。因此,在每次滚动移动时,您都会查看顶部和底部 100 像素内是否有标题 - 如果是,则从所有链接中删除事件类并添加当前标题的类。
fiddle :https://jsfiddle.net/n0scg0m5/
关于javascript - 更新滚动问题的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39456394/