jQuery 滚动时突出显示菜单（如果到达 div）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27610892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
highlight menu on scrolling (if reach div)
提问by fab
i want highlight the menu point if the div is scrolled // or clicked.
如果 div 滚动 // 或单击，我想突出显示菜单点。
http://jsfiddle.net/WeboGraph/vu6hN/2/(thats an example what i want)
http://jsfiddle.net/WeboGraph/vu6hN/2/（这是我想要的一个例子）
my code: (JS)
我的代码：（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');
}
});
});
});
my (html nav)
我的（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>
my (css)
我的（CSS）
.active_underlined a {
color: #fff;
border-bottom: 2px solid #ebebeb;
}
a.active_underlined {
color: #fff;
border-bottom: 2px solid #ebebeb;
}
here a link to the project: http://www.f-designs.de/test_onesite
这里是项目的链接：http: //www.f-designs.de/test_onesite
采纳答案by Gaurav Kalyan
Use $(this).offset().topinstead of $(this).position().top
使用$(this).offset().top代替$(this).position().top
As .position()get the current coordinates of the first element in the set of matched elements, relative to the offset parent whereas .offset()get the current coordinates of the first element in the set of matched elements, relative to the document.
As.position()获取匹配元素集中第一个元素相对于偏移父元素.offset()的当前坐标，而获取匹配元素集中第一个元素相对于文档的当前坐标。
In your website all the DIV with class inside .targetare inside therefore all the element of class .targetare returning the value .position().topequal to 0.
在您的网站中，所有带有 class 的 DIV.target都在里面，因此 class 的所有元素.target都返回.position().top等于 0的值。
Decrease the offset value so that the classchange when element reach the menu by making the ifcondition like this:
class通过使if条件如下所示，减少偏移值，以便在元素到达菜单时发生变化：
if($(window).scrollTop() >= $(this).offset().top - $("#cssmenu").height())
回答by tris timb
Found this in 2018 and ran into a syntax error trying to replicate with a more recent version of jquery (+1.0). In the last line $('nav a[href=#'+ id +']')the attribute is not properly escaped and needs to be like so $('nav a[href="#'+ id +'"]')(note added "").
在 2018 年发现了这个，并在尝试使用更新版本的 jquery (+1.0) 进行复制时遇到了语法错误。在最后一行中$('nav a[href=#'+ id +']')，属性没有正确转义，需要像这样$('nav a[href="#'+ id +'"]')（注意添加了“”）。
Here's where I found this https://api.jquery.com/attribute-contains-selector/
这是我找到这个https://api.jquery.com/attribute-contains-selector/ 的地方
