读取 DOM（网页）中的位置并相应地更改导航菜单类
Posted
技术标签:
【中文标题】读取 DOM（网页）中的位置并相应地更改导航菜单类【英文标题】：Read location in DOM (webpage) and change navmenu classes accordingly 【发布时间】：2021-06-21 20:12:37 【问题描述】：我有一个导航菜单链接到页面的某些部分。我想编写一些 JS，以便在滚动条通过它们各自的 html 部分时向每个导航菜单项添加一个类。我相信我已经知道如何向导航菜单项添加类，那么 JS 中是否有特定的方法来识别用户在 DOM 中的位置？
要动态更改导航栏中的类，我使用类似：
jQuery(document).ready(function ($)
var menu_items_links = $(".menu li a");
menu_items_links.each(function ()
if ($(this).is('[href*="#CURRENT LOCATION IN DOM"]'))
$(this).parent().addClass('current-location');
)
);
该类将在导航菜单项中添加突出显示/下划线以显示用户位于特定位置。
【问题讨论】：
【参考方案1】：您可以为此使用任何scroll spy 插件或使用以下实现
$(window).bind('scroll', function()
var currentTop = $(window).scrollTop();
var elems = $('.scrollspy');
elems.each(function(index)
var elemTop = $(this).offset().top;
var elemBottom = elemTop + $(this).height();
if(currentTop >= elemTop && currentTop <= elemBottom) //Current location tracking
var id = $(this).attr('id');
var navElem = $('a[href="#' + id+ '"]');
navElem.parent().addClass('active').siblings().removeClass( 'active' );
)
); .active
color: red;
background-color: red;
#nav
position:fixed;
top:0;
right:50%;
section
min-height: 500px;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<nav id="nav" class="navbar navbar-template">
<div class="row col-xs-12 text-center">
<ul>
<li class="active">
<a href="#Home">Home</a>
</li>
<li>
<a href="#AboutUs">AboutUs</a>
</li>
<li>
<a href="#Images">Images</a>
</li>
<li>
<a href="#Contact">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="scrollspy" id="Home">
Home
</section>
<section class="scrollspy" id="AboutUs">
AboutUs
</section>
<section class="scrollspy" id="Images">
Images
</section>
<section class="scrollspy" id="Contact">
Contact
</section>
</body>看看这个滚动间谍插件https://github.com/r3plica/Scrollspy
【讨论】：
我考虑使用scroll spy，因为我们在网站上安装了引导程序，但不幸的是菜单设置为header，而不是nav。起初我以为你的方法不适用，但在清醒地阅读之后，我认为它仍然可能......我再试一次，然后回复你。【参考方案2】：
所以最终对我有用的是使用WaypointJS。我基本上只是在 DOM 的特定部分设置航点，然后我可以定义我想要在这些地方发生的事情。这是最后的代码：
jQuery(document).ready(function ($)
var menu_items_links = $(".menu li a");
menu_items_links.each(function ()
if ($(this).is('[href*="#"]'))
$(this).parent().removeClass('current-menu-item current-menu-ancestor');
)
new Waypoint(
element: document.getElementById('explore'),
direction: 'down',
handler: function()
console.log("FIRST WAYPOINT IS ACTIVE.");
document.querySelector("a[href='/manitoba/#explore']").parentElement.classList.add('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#build']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#connect']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
,
offset: '25%',
continuous: false
);
new Waypoint(
element: document.getElementById('explore'),
direction: 'up',
handler: function()
console.log("DEACTIVATING WAYPOINT.");
document.querySelector("a[href='/manitoba/#explore']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
,
offset: '35%',
);
new Waypoint(
element: document.getElementById('build'),
handler: function()
console.log("SECOND WAYPOINT IS ACTIVE.");
document.querySelector("a[href='/manitoba/#build']").parentElement.classList.add('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#explore']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#connect']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
,
offset: '50%',
continuous: false
);
new Waypoint(
element: document.getElementById('connect'),
handler: function()
console.log("THIRD WAYPOINT IS ACTIVE.");
document.querySelector("a[href='/manitoba/#connect']").parentElement.classList.add('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#build']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
document.querySelector("a[href='/manitoba/#explore']").parentElement.classList.remove('current-menu-item', 'current-menu-ancestor');
,
offset: '50%',
continuous: false
);
);
【讨论】：
以上是关于读取 DOM（网页）中的位置并相应地更改导航菜单类的主要内容，如果未能解决你的问题，请参考以下文章