Question

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

所以这是jsfiddle中的my code，而我遇到的主要问题是活动类没有正确更改，并使侧导航栏陷入困境。我在下面发布了JS。

import pandas as pd

base = '1970-01-01'
x = '2018-02-14T22:15:00.232029+01:00'

(pd.to_datetime(x) - pd.to_datetime(base)).total_seconds()

# 1518642900.232029

它在jsfiddle上工作得相当好，但是我把这个代码放到了方形空间中，在那里它最终像this一样，当你尝试更改活动类时，所有按钮都会突出显示。

我试图通过浏览html，css和js来隔离bug，但我没有足够的JS知识来编辑脚本来修复它。我真的很感激任何帮助。提前谢谢。

编辑：链接到broken squarespace

Answer 1

在代码段中，示例页面设计有连续的部分，因此方法 ele.next（）将返回下一部分。在方形空间页面中，这些部分不是连续的，因此方法 ele.next（）将返回空，代码无法正常工作。

您可以尝试修改 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 = $(sections[i + 1]).offset().top;
      }
      else {
        nextTop = $(document).height();
      }

      if (ele.offset() !== null) {
        thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numSections);
      }
      else {
        thisTop = 0;
      }

      var docTop = $(document).scrollTop();
      console.log(thisTop);

      if(docTop >= thisTop && (docTop < nextTop)){
        $('#side-nav li').eq(i).addClass('active');
      }
    }
}

我已更新您的代码示例here。

抓住了JS的持久性问题，导航栏活动类没有正确切换

1 个答案: