如何解决Scrollspy-与平滑滚动结合使用的突出显示问题
视觉预览
例如,当点击团队时,它将首先突出显示作品集 (因为它将滚动到该部分之外)。我希望它在平滑滚动时立即将团队突出显示(删除导航中的所有其他突出显示)。因此,当某人单击导航链接上的导航菜单时,请删除所有其他活动类别。 希望有人能帮助我。如果您还有其他改进脚本的技巧,将不胜感激。
(旁问:将鼠标悬停在导航中的另一个链接上时,请删除活动类。当鼠标悬停在另一个链接上时,请重新打开活动类。)
SCROLLSPY(jQuery)
function scrollSpy() {
var sections = ['about_us','services','portfolio','team','contact'];
var current;
var headerHeight = $('header').outerHeight();
for (var i = 0; i < sections.length; i++) {
if ( $('#'+sections[i]).offset().top - headerHeight - 1 <= $(window).scrollTop() ) {
current = sections[i];
}
}
$("nav#nav-container ul li a[href='#"+current+"']").addClass('active');
$("nav#nav-container ul li a").not("a[href='#"+current+"']").removeClass('active');
}
//scrollSpy call
$(document).ready( function() {
scrollSpy();
});
$(window).scroll( function() {
scrollSpy();
});
SMOOTHSCROLL
let anchorLinks = document.querySelectorAll('a[href^="#"]')
var headerHeight = $('header').outerHeight();
for (let item of anchorLinks) {
item.addEventListener('click',(e) => {
let hashVal = item.getAttribute('href')
let topOfElement = document.querySelector(hashVal).offsetTop - headerHeight
window.scroll({ top: topOfElement,behavior: "smooth" })
history.pushState(null,null,hashVal)
e.preventDefault()
})
}
感谢您阅读:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。