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

Question

我有一个单页网站，在 ul 中有一些锚链接为 li's，我还有两个包含相同锚链接的菜单。

菜单如下：

<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');
        })
    });
});

Answer 1

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

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