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

Posted 2023-05-09

【中文标题】滚动时突出显示多个菜单锚链接

【英文标题】：Multiple menu anchor links highlight while scrolling

【发布时间】：2019-08-10 11:11:11

【问题描述】：

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

【问题讨论】：

什么不起作用？是根本不高亮，还是高亮多个链接？

@BYates：当我单击一个锚点时，正确的锚点会在两个菜单中突出显示，但是当我滚动任何一个菜单时都没有任何变化。即使我向上和向下滚动页面，我单击的锚点也会保持突出显示。就好像新代码甚至不存在一样！好像什么都没做

如果您发布body 部分的代码可能会有所帮助。我想知道您的正文部分是否与您的菜单具有相同的id 属性？因为您不能在同一页面上重复 id 值...

@BYates 你是对的，我在重复正文部分 ID，我知道不重复 ID，但不认为页面 ID 和锚链接被认为是相同的 - 尽管现在我写了这个，这听起来很奇怪 - 不知道我为什么这么认为。

【参考方案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

【讨论】：

另外：我不确定 var $currentSection 在您的第三个代码块的第 5 行发生了什么。它缺少行尾的分号，并且似乎没有得到值。希望对您有所帮助。