我一直在使用此code snippet在单个页面站点中添加垂直点导航,当单击链接之一时,该页面可以平滑滚动到该部分,并在活动部分保持突出显示。我对CSS进行了很多调整,以使其看起来像我想要的样子,然后替换了这些部分。
由于某些原因,第四和第五个点上的活动类没有做出应有的反应,并且当您选择第四个点时,第四和第五个点都将突出显示。香港专业教育学院已经在一些设备上进行了测试,他们都做同样的事情。它在jsfiddle上运行良好,但Squarespace站点看起来像this,因此希望有人能够帮助/告诉我是什么使它行为异常。
Squarespace link
Jsfiddle with my code,下面粘贴了js代码。
$(document).ready(function(){
$('.awesome-tooltip').tooltip({
placement: 'left'
});
$(window).bind('scroll',function(e){
dotnavigation();
});
function dotnavigation(){
var numSections = $('section').length;
$('#side-nav li a').removeClass('active').parent('li').removeClass('active');
var sections = $('section');
var i = 0;
for (i = 0; i < sections.length; i++) {
var ele = $(sections[i]), nextTop;
//console.log(ele.next().html());
if (i < sections.length - 1) {
nextTop = Math.floor($(sections[i + 1]).offset().top);
}
else {
nextTop = $(document).height();
}
if (ele.offset() !== null) {
thisTop = Math.floor(ele.offset().top - ((nextTop - ele.offset().top) / numSections));
}
else {
thisTop = 0;
}
var docTop = $(document).scrollTop();
if(docTop >= thisTop && (docTop < nextTop)){
console.log(docTop + ":" + thisTop + ":" + nextTop );
$('#side-nav li').eq(i).addClass('active');
}
}
}
/* get clicks working */
$('#side-nav li').click(function(){
var id = $(this).find('a').attr("href"),
posi,
ele,
padding = 0;
ele = $(id);
posi = ($(ele).offset()||0).top - padding;
$('html, body').animate({scrollTop:posi}, 'slow');
return false;
});
在此先感谢朋友
最佳答案
似乎您的最后2个部分的高度在视口顶部中触发的幅度并不大。
尝试将最大高度设置为窗口高度。
关于javascript - Active Class无法开启JS Nav点,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49082457/