Как использовать библиотеку jquery -scrollspy с тегом body с установленным идентификатором? - PullRequest
Новая
       61

Как использовать библиотеку jquery -scrollspy с тегом body с установленным идентификатором?

0 голосов
/ 02 апреля 2020

Я использую библиотеку jquery -scrollspy . Для простых случаев это прекрасно работает. Но я хочу, чтобы ссылка «Домой» на одном из моих веб-сайтов прокручивалась вверх и отправляла сигнал onLeave при прокрутке во второй раздел.

Таким образом, на сайте есть следующие разделы (например):

  1. body#home
  2. section[data-scrollspied]#music
  3. section[data-scrollspied]#other

и код, который я пытаюсь использовать, таков: 

(function ($) {
    $(function () {
        var $links = $("a[href^='#']");

        $('body, section[data-scrollspied]').each(function() {
            var $this = $(this);
            var position = $this.position();

            var start = position.top;
            var end = position.top + $this.height();

            if ($this.is("body")) {
                end = $("section[data-scrollspied]:first").position().top;
            }

            $this.scrollspy({
                min: start,
                max: end,
                onEnter: function(element /*, position*/ ) {
                    $('a[href="#' + $this.attr("id") + '"]').addClass("active");
                },
                onLeave: function(element /*, position*/ ) {
                    $('a[href="#' + $this.attr("id") + '"]').removeClass("active");
                }
            });
        });

        $links.on("click", function () {
            //setTimeout(function () {
                $links.removeClass("active");
                $(this).addClass("active");
            //}, 500);
        });
    });
})(jQuery);

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

Пример, который не работает с тегом body, как я хочу , но в остальном работает очень хорошо, есть в этот JSFiddle .

Если мне это поможет, я могу использовать другую библиотеку scrollspy.

Спасибо!

Обновление 1

Мне просто нужно было поместить активный класс в ссылку #home в начальной строке HTML, и все работает хорошо.

Обновление 2

Я думал все работало хорошо, пока я не включил эту часть CSS: 

html {
    scroll-behavior: smooth;
}

Проблема в том, что когда я нажимаю на одну из 3 ссылок, их класс active не переключается хорошо, иногда есть 2 активных ссылки одновременно.

...