Question

我一直在使用此code snippet将垂直点导航添加到单页网站，当点击其中一个链接时，该网站会平滑滚动到某个部分，并在活动中保持突出显示部分。我做了很多调整到css以使它看起来我想要的，然后替换了部分。

由于某种原因，第四和第五个点上的活动类不会以它们应有的方式作出反应，当您选择第四个点时，第四个和第五个点都会突出显示。我已经在一些设备上测试了它们，它们都做同样的事情。它在jsfiddle上运行正常，但是方形空间网站看起来像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;
});

先谢谢你的朋友

Answer 1

似乎你的最后2个部分的高度在视图端口顶部触发并不大。尽量给窗户高度增加最大高度。

Active Class不能打开JS Nav Dots

1 个答案: