javascript - 粘性导航未正确添加活动链接
问题描述
我正在尝试实现导航。我已经使用此代码来做同样的事情。
<nav>
<ul id="mainNav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="work" data-sr><h2>Work</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>
// Cache selectors
var lastId,
topMenu = $("#mainNav"),
topMenuHeight = topMenu.outerHeight()+1,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 850);
e.preventDefault();
});
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
要求:- 我希望导航具有可以根据要求交换的链接。
问题:- 在上面的 codepen 中,当我交换链接时,它没有正确添加活动类。如果我交换导航链接和部分链接,那么只有它运作良好。例如,如果我的导航有 HOME、WORK、ABOUT 和 CONTACT。然后我应该能够将工作链接的位置与联系链接交换,并且我的粘性导航仍然应该正确添加活动类而不改变它们各自的部分。
请帮我实现上述场景。
解决方案
下面的代码应该可以解决您的问题。
// Cache selectors
var lastId,
topMenu = $("#mainNav"),
topMenuHeight = topMenu.outerHeight()+1,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = $('section');
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 850);
e.preventDefault();
setActiveNav(href);
});
function setActiveNav(href) {
menuItems.each((index, menu) => {
if(menu.hash === href) {
$(menu).parent().addClass('active');
} else {
$(menu).parent().removeClass('active');
}
});
}
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop();
// Get id of current scroll item
var cur = scrollItems.toArray().findIndex(item => {
return (item.offsetTop >= fromTop);
});
// Get the id of the current element
var id = cur && cur > -1 ? scrollItems[cur].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
在单独的功能中构建您的功能将解决未来的维护开销。
主要问题在于结构、元素索引和位置。
推荐阅读
- html - 使用角度上传带有base64的图像时,假路径存储在mongodb中
- python - 除了变量字符,如何用“-”替换字符串中的每个字母?(Python)
- java - 如何使用 Mockito 测试数据库调用
- javascript - 设置多源视频并获取每个持续时间的视频
- javascript - 单击按钮时显示日期(;)以输入 - JQuery JS PHP
- mysql - 是否可以在本地 Linux 机器上设置 Azure 混合连接管理器 (HCM)?
- sql - 如何优化在 SQLite 中创建直方图箱?
- vba - Excel Vba 串口输入数据
- r - 如何添加不属于 DiagramVenn (draw.triple.venn) 中的三个集合中的任何一个的值?
- android - 错误:[RoomProcessor:MiscError] androidx.room.RoomProcessor 无法处理此类,因为并非所有依赖项都可以解决