滚动时突出显示菜单（如果到达 div）

Posted 2023-03-06

【中文标题】滚动时突出显示菜单（如果到达 div）

【英文标题】：highlight menu on scrolling (if reach div)

【发布时间】：2015-02-21 00:52:37

【问题描述】：

如果 div 滚动//或单击，我想突出显示菜单点。

http://jsfiddle.net/WeboGraph/vu6hN/2/（这是我想要的一个例子）

我的代码： (JS)

    $(document).ready(function()
      $('nav a').on('click', function(event) 
          $(this).parent().find('a').removeClass('active_underlined');
          $(this).addClass('active_underlined');
      );

      $(window).on('scroll', function() 
          $('.target').each(function() 
              if($(window).scrollTop() >= $(this).position().top) 
                  var id = $(this).attr('id');
                  $('nav a').removeClass('active_underlined');
                  $('nav a[href=#'+ id +']').addClass('active_underlined');
              
          );
      );
    );

我的（html 导航）

        <nav>
           <div id="cssmenu">
              <ul id="horizontalmenu" class="underlinemenu">
                  <li><a data-scroll href="#fdesigns"  class="active_underlined">FDesigns</a> </li>
                  <li><a data-scroll href="#skills">skills</a> </li>
                  <li><a data-scroll href="#workflow">WORKFLOW</a> </li>
                  <li><a data-scroll href="#portfolio">Portfolio</a> </li>
                  <li><a data-scroll href="#about">About</a> </li>
                  <li><a data-scroll href="#kontakt">Kontakt</a> </li>
              </ul>   
          </div>
        </nav> 

我的（css）

.active_underlined a 
  color: #fff;
  border-bottom: 2px solid #ebebeb;


a.active_underlined 
  color: #fff;
  border-bottom: 2px solid #ebebeb;

这里是项目的链接：http://www.f-designs.de/test_onesite

【问题讨论】：

那个小提琴似乎工作正常。究竟是什么问题？

f-designs.de/test_onesite 这是我的网站，它不适用于小提琴上面的代码是我想要在我的页面上的示例

position() 方法在您的 .target 项目上返回 (0,0) 的位置。这意味着if($(window).scrollTop() >= $(this).position().top) 始终为真。

【参考方案1】：

在 2018 年发现此问题，并在尝试使用更新版本的 jquery (+1.0) 进行复制时遇到语法错误。在最后一行$('nav a[href=#'+ id +']') 中，属性没有正确转义，需要像$('nav a[href="#'+ id +'"]') 一样（注意添加了“”）。

我在这里找到了这个https://api.jquery.com/attribute-contains-selector/

【参考方案2】：

使用$(this).offset().top 而不是$(this).position().top

Fiddle

.position() 获取匹配元素集中第一个元素相对于偏移父元素的当前坐标，而.offset() 获取匹配元素集中第一个元素相对于文档的当前坐标.

在您的网站中，所有类在 .target 内的 DIV 都在其中，因此类 .target 的所有元素都返回值 .position().top 等于 0。

通过使if 条件如下来减小偏移值，以便当元素到达菜单时class 发生变化：

if($(window).scrollTop() >= $(this).offset().top - $("#cssmenu").height())

【讨论】：

嘿，谢谢它的工作原理，但是现在如果我单击菜单，则在单击的元素被突出显示之前的元素（也许我必须设置 .offset top 在浏览器顶部之前计算一些像素？）你可以请帮帮我？

更新答案。您只需从偏移量减少cssmenu 高度。顺便说一句，您的网站看起来很棒。

@gaurav kalyan，如果你喜欢我的网站，谢谢 :) 你能给我一个更详细的答案//解释我必须做什么吗？谢谢和圣诞快乐

我也建议使用@tris timb 的答案。