Во время прокрутки выделяются несколько якорных ссылок меню - PullRequest
Новая
       28

Во время прокрутки выделяются несколько якорных ссылок меню

0 голосов
/ 19 марта 2019

У меня есть одностраничный веб-сайт с некоторыми ссылками ссылок как li's в ul, у меня также есть два меню, которые включают одинаковые ссылки ссылок.

Меню выглядит так: 

<div id="nav">
    <ul>
        <li><a href="#home" class="current_page_item" onclick="closeNav();">Home<li>
        <li><a href="#about" onclick="closeNav();">About<li>
        <li><a href="#faq" onclick="closeNav();">FAQ<li>
        <li><a href="#contact" onclick="closeNav();">Contact<li>
    </ul>
</div>

Я нашел некоторый код, который позволяет мне выделить текущую ссылку привязки из обоих этих меню (которая работает): 

const navsStr = '#nav li, #foot li';

$(navsStr).on('click', function (e) {
    e.preventDefault();
    const href = $(this).find('a').attr('href');
    let items = $(navsStr).find("a[href$='" + href + "']");

    $(items).parent().addClass('current_page_item').siblings().removeClass('current_page_item');  
});

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

$(document).ready(function(){
    var $sections = $('#nav, #overlay');

    $(window).scroll(function(){
        var currentScroll = $(this).scrollTop();
        var $currentSection

        $sections.each(function(){
            var divPosition = $(this).offset().top;

            if( divPosition - 1 < currentScroll ){
                $currentSection = $(this);
            }

            var id = $currentSection.attr('id');
            $('a').removeClass('current_page_item');
            $("[href=#"+id+"]").addClass('current_page_item');
        })
    });
});

1 Ответ

0 голосов
/ 20 марта 2019

Не уверен, что это именно то, что вы ищете, но чтобы подчеркнуть, вы можете изменить класс CSS при прокрутке, добавив новый класс и удалив старый класс с помощью JQuery, или переключив классы. Так что установите класс, такой как "зеленый" на всех ваших тегах, затем:

JQuery Добавить / Удалить: 

$(window).scroll(function(){
      $('.green').addClass('red');
      $('.green').removeClass('green');      
    });

Или переключить: 

$(window).scroll(function(){
      $('.green').toggleClass('red');
     $('.green').toggleClass('green');
   });

Если вам нужно изменить его только в определенной точке прокрутки, вы можете попробовать этот поток, который показывает, как это сделать с пиксельными значениями или с помощью якорей: Изменить элемент CSS с помощью JQuery, когда прокрутка достигает точки привязки

...