滚动时多个菜单锚链接会突出显示

Posted 2021-04-13

我有一个单页的网站，在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');
        })
    });
});

答案

不确定这是否正是您正在寻找的，但要突出显示您可以通过添加新类并使用JQuery删除旧类或切换类来更改滚动的CSS类。因此，在所有标签上设置一个类“绿色”，然后：

JQuery添加/删除：

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

或者切换：

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

如果您只需要在某个滚动点进行更改，则可以尝试使用此线程，该线程显示如何使用像素值或锚点来执行此操作：Change CSS element with JQuery when scroll reaches an anchor point