Question

我正在尝试将我的固定标题中的链接更改为滚动。

如果您刷新页面，代码似乎有效如果您滚动到C部分并刷新页面并滚动它，则会识别出您在该部分，但由于某种原因，它似乎不会在滚动时动态执行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        body, html {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: #f5f5f5;
            text-align: center;
        }

        nav ul {
            list-style: none;
            display: inline-block;
        }

        nav ul li {
            display: inline-block;
            padding-right: 10px;
        }

        section {
            height: 100%;
            padding: 8rem;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sectionA {
            background: orangered;
        }
        .sectionB {
            background: steelblue;
        }
        .sectionC {
            background: purple;
        }
        .sectionD {
            background: black;
        }

        .active {
            color: red;
        }

    </style>
</head>
<body>
    <nav>
        <ul>
            <li class="sectionA-marker">Section A</li>
            <li class="sectionB-marker">Section B</li>
            <li class="sectionC-marker">Section C</li>
            <li class="sectionD-marker">Section D</li>
        </ul>
    </nav>
    <section class="sectionA">
        <h2>Section A</h2>
    </section>
    <section class="sectionB">
        <h2>Section B</h2>
    </section>
    <section class="sectionC">
        <h2>Section C</h2>
    </section>
    <section class="sectionD">
        <h2>Section D</h2>
    </section>
</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 scrollTop = $(document).scrollTop();
    var navHeight = $("nav").height();
    var sectionElement = $("section");

    $(document).on("scroll", function(){
        sectionElement.each(function(){
            var section = $(this);

            if( section.offset().top < (scrollTop + navHeight) && (scrollTop + navHeight) < (section.offset().top + section.outerHeight()) ) {
                var targetClass = "." + section.attr("class") + "-marker";
                $("nav ul li").removeClass("active");
                $(targetClass).addClass("active");
            }
        });
    });
}());

</script>
</html>

Answer 1

这是纠正的小提琴

https://jsfiddle.net/Lr53c1oh/3/

每次在滚动事件

中都需要获取scrollTop的当前值

$(document).on("scroll", function(){
var scrollTop = $(document).scrollTop();
//rest of the code

Answer 2

<强>被修改

对不起，我的第一个答案非常懒惰;

发生问题是因为您尝试将每个部分的顶部与屏幕的当前位置进行比较，而不是在页面加载时获得的位置。

所以事件应该是这样的：

$(document).on("scroll", function(){
    // get new value of scrollTop after each event call
    scrollTop = $(document).scrollTop();

    sectionElement.each(function(){
        var section = $(this);

        if( section.offset().top < (scrollTop + navHeight) && (scrollTop + navHeight) < (section.offset().top + section.outerHeight()) ) {
            var targetClass = "." + section.attr("class") + "-marker";
            $("nav ul li").removeClass("active");
            $(targetClass).addClass("active");
        }
    });
});

活动链接适用于页面刷新但不滚动？

2 个答案: