Question

如果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）

        <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

Answer 1

使用$(this).offset().top代替$(this).position().top

Fiddle

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

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

减少偏移值，以便当元素到达菜单时class通过这样的if条件更改：

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

Answer 2

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

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

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

2 个答案: