Question

我有一个包含不同部分的页面，可以通过单击导航栏中的相应链接滚动或访问。该页面的演示在codepen http://codepen.io/meek/pen/NNprYb?editors=1010

上

我使用以下代码来跟踪用户滚动的部分并在导航栏中突出显示

    $(window).on("scroll", function() {

        var currentPos = $(window).scrollTop();

        $('.nav li a').each(function() {
            var sectionLink = $(this);
            var section = $(sectionLink.attr('href'));
            if(section.position().top <= currentPos && section.position().top + section.height() > currentPos) {
                $('.nav li').removeClass('active');
                sectionLink.parent().addClass('active');
            }
            else {
                sectionLink.parent().removeClass('active');
            }
        });

    });

它工作正常，但是在主页和关于部分之间滚动的间隙，没有任何链接突出显示。我有一种感觉，这可能是因为导航栏在家和大约之间占据的空间，但我不知道如何克服这一点。理想情况下，我希望这个差距也突出“约”。

我试图将其添加到上面的代码中：

            else if($('#nav-wrapper').position().top <= currentPos && $('#nav-wrapper').position().top + $('#nav-wrapper').height() > currentPos) {
                $('.nav li').removeClass('active');
                $('#temp').addClass('active');
            }

但它不起作用。帮助赞赏

Answer 1

<强>解决方案：调整if事件中的scroll语句，以符合以下条件。

if(section.position().top <= currentPos && sectionLink.offset().top + section.height() > currentPos)

键，section.position().top的第二个实例更改为sectionLink.offset().top

突出显示关于滚动的当前部分 - 部分之间的差距

1 个答案: