gpt4 book ai didi

javascript - 使用 JavaScript/JQuery,当相关元素从下方经过时,使导航链接突出显示?

转载 作者:数据小太阳 更新时间:2023-10-29 04:15:07 26 4
gpt4 key购买 nike

我有一个单页网站,导航菜单 position:fixed 位于页面顶部。

当我单击导航菜单中的链接时,页面会使用此 JQuery 滚动到相应的部分:

$('a[href^="#"]').live('click',function(event){
event.preventDefault();
var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
$('html, body').animate({scrollTop:target_offset}, 1200, 'easeOutExpo');
});

我想要发生的是当我手动滚动页面 $(window).scroll(function(){...}); 时,与导航下传递的部分相关菜单#navi-container,导航链接高亮使用.addClass('activeNav');

最佳答案

查看我几天前偶然发现的这个 jsfiddle,我相信这正是您要找的:http://jsfiddle.net/x3V6Y/

$(function(){
var sections = {},
_height = $(window).height(),
i = 0;

// Grab positions of our sections
$('.section').each(function(){
sections[this.name] = $(this).offset().top;
});

$(document).scroll(function(){
var $this = $(this),
pos = $this.scrollTop(),
$parent = {};

for(i in sections){
$parent = $('[name="' + i + '"]').parent();
//you now have a reference to a jQuery object that is the parent of this section

if(sections[i] > pos && sections[i] < pos + _height){
$('a').removeClass('active');
$('#nav_' + i).addClass('active');
}
}
});
});

我想指出,如果您最终使用它,您需要重新考虑 for(i in sections) 循环,因为它对性能有很大的影响。如果可以,使用这种循环是个好主意:

for (var i = 0, len = sections.length; i < len; i++) {
//...
}

...但这需要重新考虑如何存储部分元素的偏移量,因为这种类型的循环需要一个数组而不是一个对象(一个对象可以工作,但它必须是零索引和所有索引必须是整数)。

关于javascript - 使用 JavaScript/JQuery,当相关元素从下方经过时,使导航链接突出显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8496235/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com