Блог

Главная - Вопросы по программированию - Активная ссылка работает при обновлении страницы, но не при прокрутке?

Активная ссылка работает при обновлении страницы, но не при прокрутке?

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь изменить мои ссылки в моем фиксированном заголовке при прокрутке.

Кажется, что код работает, если вы обновляете страницу, например Если вы перейдете к разделу C, обновите страницу и прокрутите, она распознает, что вы находитесь в этом разделе, но по какой-то причине, похоже, это не выполняется динамически во время прокрутки.

https://jsfiddle.net/Lr53c1oh/1/

 <!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) amp;amp; (scrollTop   navHeight) < (section.offset().top   section.outerHeight()) ) {
                var targetClass = "."   section.attr("class")   "-marker";
                $("nav ul li").removeClass("active");
                $(targetClass).addClass("active");
            }
        });
    });
}());

</script>
</html>

Ответ №1:

Вот исправленная скрипка

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

вам нужно получать текущее значение scrollTop каждый раз в событии прокрутки

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

Ответ №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) amp;amp; (scrollTop   navHeight) < (section.offset().top   section.outerHeight()) ) {
            var targetClass = "."   section.attr("class")   "-marker";
            $("nav ul li").removeClass("active");
            $(targetClass).addClass("active");
        }
    });
});

Комментарии:

1. Спасибо за ссылку, но я бы хотел иметь возможность делать это и самостоятельно 🙂

Метки: ,