Question

我在每个部分滚动时都建立了一个活动链接。

问题是：

它似乎在部分内略有变化，而不是滚动击中最顶部（我认为它可能与填充有关）。
在进入该部分之前，A部分会突出显示。

我如何解决这两个问题？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div class="header pd">
        <h1>Header</h1>
    </div>
    <nav>
        <ul>
            <li>Section A</li>
            <li>Section B</li>
            <li>Section C</li>
            <li>Section D</li>
        </ul>
    </nav>
    <div class="section-a pd">
        <h3>Section A</h3>
    </div>
    <div class="section-b pd">
        <h3>Section B</h3>
    </div>
    <div class="section-c pd">
        <h3>Section C</h3>
    </div>
    <div class="section-d pd">
        <h3>Section D</h3>
    </div>
</body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script type="text/javascript">
(function(){

    var navOffset = $("nav").offset();

    $(document).on("scroll", function(){
        var scrollTop = $(document).scrollTop();

        if(scrollTop > navOffset.top) {
            console.log(scrollTop);
            $("nav").addClass("fixed");
        } else {
            $("nav").removeClass("fixed");
        }
    });

    $(document).on("scroll", function(){
        var scrollTop = $(document).scrollTop();

        var sectionA = $(".section-a").offset().top;
        var sectionB = $(".section-b").offset().top;
        var sectionC = $(".section-c").offset().top;
        var sectionD = $(".section-d").offset().top;
        var activeSection;

        if(scrollTop < sectionB) {
            activeSection = $("nav>ul>li:nth-child(1)");
        } else if (scrollTop < sectionC){
            activeSection = $("nav>ul>li:nth-child(2)");;
        } else if(scrollTop < sectionD) {
            activeSection = $("nav>ul>li:nth-child(3)");;
        } else {
            activeSection = $("nav>ul>li:nth-child(4)");;
        }

        activeSection.addClass("highlight");

        $("nav>ul>li").not(activeSection).removeClass("highlight");

    });

}());

</script>
</html>

由于

Answer 1

您必须通过减去当前滚动顶部减去当前部分顶部坐标来检查滚动范围。当它们相等时，该减法将等于零，这就是你知道哪个部分在视图中的方式。问题是当它们完全为零时几乎不可能捕获，因此你必须使用以下范围检查减法何时接近零：

//Checking when the subtraction is between 0 and 200 
if ((scrollTop - sectionA) > 0 && (scrollTop - sectionA) < 200) {
    activeSection = $("nav>ul>li:nth-child(1)");
} else if ((scrollTop - sectionB*.8) > 0 && (scrollTop - sectionB*.8) < 200) {
    activeSection = $("nav>ul>li:nth-child(2)");
} else if ((scrollTop - sectionC*.8) > 0 && (scrollTop - sectionC*.8) < 200) {
    activeSection = $("nav>ul>li:nth-child(3)");
} else if ((scrollTop - sectionD*.8) > 0 && (scrollTop - sectionD*.8) < 200) {
    activeSection = $("nav>ul>li:nth-child(4)");
}

在我的例子中，我正在检查当前滚动差异是否> 0和＆lt;因此，在零到200之间。当用户向上或向下滚动时，如果用户快速滚动，则滚动坐标可能会跳过。我选择了200作为上限，因为小于该值的数字会使范围太小，如果用户滚动非常快并且if语句可能永远不会被评估，那么可能会跳过该较小范围中的部分或全部数字，因此该部分指标不会突出显示。您可以选择更大的数字来增加滚动范围，从而增加检测当前滚动位置在当前可见部分的机会。但是，避免使用太大的数字，否则用户将向右滚动超出视图中的部分，并且不会在导航区域中突出显示。

此外，请注意我是乘以倍数.8;或80％的部分顶部坐标值。这是为了补偿导航部分的高度。如果没有这个，导航部分指示器将不会突出显示，除非您实际滚动传递当前部分，因为当前部分尚未滚动到顶部。这应该有助于你的问题，或者至少指出你的方向（我希望）。

滚动延迟时的活动链接

1 个答案: