活动链接上滚动延迟

Active Link On Scroll Delay

本文关键字：延迟 滚动 链接 活动      更新时间：2023-09-26

我制作了一个活动链接，用于在每个部分滚动。

问题是:

  1. 它似乎在部分内部略有变化，而不是滚动到达顶部(我认为这可能与填充有关)。

  2. Section A在进入Section前高亮显示。

我该如何解决这两个问题?

https://jsfiddle.net/zy3L4fht/

<!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>

谢谢

您必须通过减去当前滚动顶部减去当前部分顶部坐标来检查滚动范围。当它们相等时，减法就等于零这样你就知道哪个部分在视线范围内了。问题是，当它们恰好为零时，几乎不可能捕捉到，因此您必须使用以下范围检查减法何时近似为零:

//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和<200. 所以在0到200之间。当用户向上或向下滚动时，如果用户快速滚动，则滚动坐标可能会跳过。我选择200作为上限，因为小于200的数字会使范围太小，如果用户滚动非常快，则可能跳过较小范围内的一些或所有数字，并且if语句可能永远不会被评估，因此section指示符将不会突出显示。您可以选择更大的数字来增加滚动范围，从而增加检测到当前滚动位置位于当前可见部分的机会。但是要避免使用太大的数字，否则用户会滚动到视图内的部分之外，并且它不会在导航区突出显示。

此外，请注意我乘以了。8;或截面顶部坐标值的80%。这是为了补偿导航部分的高度。如果不这样做，导航部分指示器将不会突出显示，除非您实际上滚动通过当前部分，因为当前部分尚未滚动到顶部。这应该有助于解决你的问题，或者至少为你指明一个好的方向(我希望)。

相关文章：