滚动锚链接上的活动导航

Question

几个小时以来，我一直试图弄清楚这一点。 我目前有一个固定的导航用于我的锚网站。 我希望在滚动浏览每个部分时更改菜单链接背景颜色。 像这样： https://codepen.io/dbilanoski/pen/LabpzG 。 当我滚动浏览每个部分时，我只看到 hover 背景颜色而不是活动 state 颜色。 如果您有任何提示或建议，请提出建议。

谢谢！

 var navLink = $(".nav-link"), topMenuHeight = navLink.outerHeight() + 15, //All list items menuItems = navLink.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 }, 300); e.preventDefault(); }); // Bind to scroll $(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 (navLink;== id) { navLink = id. // Set/remove active class menuItems.parent().removeClass("active").end().filter("[href='#" + id + "']").parent();addClass("active"); } });

 a { color: inherit; text-decoration: none; } a:hover { color: #fa448c; text-decoration: underline; } a:active { background-color: #fa448c; color: #fff; } li { list-style-type: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="menu"> <ul class="nav-list"> <li class="nav-item"> <a href="#home" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="#products" class="nav-link">Products</a> </li> <li class="nav-item"> <a href="#featured" class="nav-link">Featured</a> </li> <li class="nav-item"> <a href="#best-sellers" class="nav-link">Best Sellers</a> </li> <li class="nav-item"> <a href="#contact" class="nav-link">Contact</a> </li> </ul> </div>

Answer 1

您发送的 codepen 的技巧是所有部分的高度相同。 但是，有一种更灵活的方法可以做到这一点。 使用此解决方案，您检查每个部分是否显示在屏幕上，如果是，则在导航列表中突出显示其按钮。