jquery 滚动，在页面滚动时更改导航活动类，相对于部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14161132/
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
jquery scroll, change navigation active class as the page is scrolling, relative to sections
提问by Joshc
http://jsfiddle.net/motocomdigital/gUWdJ/
http://jsfiddle.net/motocomdigital/gUWdJ/
I'm after a jquery scroll technique please that I would like to adapt to my project.
我正在使用 jquery 滚动技术，我想适应我的项目。
Please see my project example as a fiddle here http://jsfiddle.net/motocomdigital/gUWdJ/
请在此处将我的项目示例视为小提琴http://jsfiddle.net/motocomdigital/gUWdJ/
Currently you can see that my nav links automatically animates the scrolling relative to the <section>'s.
目前，您可以看到我的导航链接自动为相对于 的滚动设置动画<section>。
My question is, using the $(window).scrollmethod, how can I add a .activeclass to my nav awhen the sections reach the top of the window?
我的问题是，使用该$(window).scroll方法，当部分到达窗口顶部时.active，我如何向我添加一个类nav a？
So for example if the user scrolls down the page (instead of the navigation links), I want the active class to be added relative navigation link. Indicating where you are on the page.
例如，如果用户向下滚动页面（而不是导航链接），我希望活动类添加相对导航链接。指示您在页面上的位置。
The active class will have to be removed then added every time I'm guessing as the user scrolls down the page.
当用户向下滚动页面时，每次我猜测时都必须删除然后添加活动类。
Also you will have to account for the 28px height of the fixed navigation bar, offset top window.
此外，您还必须考虑固定导航栏的 28px 高度，偏移顶部窗口。
Can anyone please show me a technique that I can try and use or adapt, or perhaps show me using my jsfiddle :)
任何人都可以向我展示一种我可以尝试使用或适应的技术，或者向我展示使用我的 jsfiddle :)
Any help would be much appreciated, thanks in advance!
任何帮助将不胜感激，提前致谢！
http://jsfiddle.net/motocomdigital/gUWdJ/
http://jsfiddle.net/motocomdigital/gUWdJ/
回答by A. Wolff
If you wish a more generic function:
如果你想要一个更通用的功能：
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('nav').addClass('fixed');
$('.wrapper section').each(function(i) {
if ($(this).position().top <= windscroll - 100) {
$('nav a.active').removeClass('active');
$('nav a').eq(i).addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('nav a.active').removeClass('active');
$('nav a:first').addClass('active');
}
}).scroll();?
回答by Jai
You can do this way: http://jsfiddle.net/gUWdJ/1/
你可以这样做：http: //jsfiddle.net/gUWdJ/1/
$(window).scroll(function() {
if ($(this).scrollTop() < $('section[data-anchor="top"]').offset().top) {
$('nav a').removeClass('active');
}
if ($(this).scrollTop() >= $('section[data-anchor="top"]').offset().top) {
$('nav a').removeClass('active');
$('nav a:eq(0)').addClass('active');
}
if ($(this).scrollTop() >= $('section[data-anchor="news"]').offset().top) {
$('nav a').removeClass('active');
$('nav a:eq(1)').addClass('active');
}
if ($(this).scrollTop() >= $('section[data-anchor="products"]').offset().top) {
$('nav a').removeClass('active');
$('nav a:eq(2)').addClass('active');
}
if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) {
$('nav a').removeClass('active');
$('nav a:eq(3)').addClass('active');
}
});
回答by Jason
I went ahead and modified my script off of A. Wolf because I needed to make sure that my menu items lit up with a negative top difference instead of at 0. This works a lot better than creating a separate function and avoids having to create a click event for each menu item. I would also modify this script to account for the last item in the menu, it should be automatically highlighted if the second to last item is. I suppose mine is very similar but different as I handled my each loop outside of the my main highlight function. The other great thing about my modification is that accounts for having images inside of a link inside of a menu item and accounts for the height of a element and when the bottom of that element hits the top of the page, which is when the highlight should end before a new one does.
我继续修改了 A. Wolf 的脚本，因为我需要确保我的菜单项以负顶差而不是 0 点亮。这比创建一个单独的函数要好得多，并且不必创建一个每个菜单项的单击事件。我还将修改此脚本以说明菜单中的最后一项，如果倒数第二项是，它应该自动突出显示。我想我的非常相似但不同，因为我在主要高亮功能之外处理了我的每个循环。关于我的修改的另一个好处是，考虑了在菜单项内的链接内有图像并考虑了元素的高度以及该元素的底部何时到达页面顶部，这是高亮显示的时间在新的之前结束。
function highlight(item)
{
var itemTop = jQuery(item).position().top;
var windowTop = jQuery(window).scrollTop();
var topDifference = (windowTop - itemTop);
var itemHeight = jQuery(item).height();
var bottomDifference = topDifference - itemHeight;
var menuId = jQuery('#nav-icons li a').attr('href');
if (menuId = item)
{
if(topDifference > -1 && bottomDifference < 0)
{
jQuery("#nav-icons li a[href='" + item + "']").parent().addClass('active');
jQuery("#nav-icons li a[href!='" + item + "']").parent().removeClass('active');
}
else {
jQuery("#nav-icons li a[href='" + item + "']").parent().removeClass('active');
}
}
}
jQuery('#nav-icons li a').each(function(){
var eachAttr = jQuery(this).attr('href');
highlight(eachAttr);
});
