本文档旨在提供一种解决方案，用于实现导航栏在页面滚动时自动显示/隐藏，并根据用户在页面上的位置或点击的导航链接，动态激活对应的导航项。该方案结合了 JavaScript 和 jQuery，能够实现平滑滚动和激活效果。以下将详细介绍实现步骤和注意事项。
导航栏显示/隐藏
通过监听 window.onscroll 事件，可以检测页面滚动方向，从而控制导航栏的显示和隐藏。
var prevScrollpos = window.pageYOffset;window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbarSection").style.top = "0"; } else { document.getElementById("navbarSection").style.top = "-70px"; } prevScrollpos = currentScrollPos;};
这段代码的核心在于比较前一个滚动位置 prevScrollpos 和当前滚动位置 currentScrollPos。如果用户向上滚动（prevScrollpos > currentScrollPos），则显示导航栏；否则，隐藏导航栏。注意，这里假设导航栏的 ID 为 navbarSection，并且初始状态下 top 值为 0。
导航链接激活
导航链接的激活状态需要根据用户的滚动位置和点击事件进行更新。
滚动时激活
onScroll 函数用于根据当前滚动位置，激活对应的导航链接。
function onScroll(event) { var scrollPos = $(document).scrollTop(); $("#navbarSection a").each(function() { var currLink = $(this); var refElement = $(currLink.attr("href")); if ( refElement.position().top scrollPos ) { $("#navbarSection ul li a").removeClass("active"); currLink.addClass("active"); } else { currLink.removeClass("active"); } });}$(document).ready(function() { $(document).on("scroll", onScroll);});
这段代码遍历导航栏中的所有链接，并检查其对应的 section 是否在当前视口内。如果在，则添加 active 类，否则移除。
注意事项:
确保每个导航链接的 href 属性值，对应页面上相应 section 的 id 属性值。确保页面上存在与导航链接 href 相对应的 section 元素，例如
。
点击时激活
当用户点击导航链接时，需要平滑滚动到对应的 section，并激活该链接。
$(document).ready(function() { $(document).on("scroll", onScroll); //smoothscroll $(".navbar-toggler").on("click", function(e) { e.preventDefault(); $(document).off("scroll"); $(".closeIcon").on("click", function(e) { $(this).removeClass("active"); }); $(this).addClass("active"); var target = $(this).parents("div.container-fluid").find(".navbar-brand").attr("href") menu = target; $target = $(target); $("html, body") .stop() .animate({ scrollTop: $target.offset().top + 2, }, 500, "swing", function() { window.location.hash = target; $(document).on("scroll", onScroll); } ); });});
这段代码首先阻止了默认的链接跳转行为，然后使用 animate 函数实现平滑滚动。滚动完成后，重新启用 onScroll 事件监听。
关键点：
e.preventDefault() 阻止默认的链接跳转行为。$(document).off(“scroll”) 在滚动动画执行期间，暂停 onScroll 事件监听，防止冲突。滚动动画完成后，重新启用 onScroll 事件监听。
完整示例
下面是完整的 HTML、CSS 和 JavaScript 代码示例：
HTML:
Navbar on scroll Hero Section Work Section About Us Section Service Section Contact Section
CSS (style.css):
* { margin: 0px; padding: 0px; box-sizing: border-box; font-family: 'Poppins', sans-serif !important;}#navbarSection { position: sticky !important; top: 0; /* Ensure initial top value */ background: white !important; transition: all .25s ease-in-out 0s !important;}Section { margin-bottom: 150px; height: 100vh; display: flex; align-items: center;}.blue-button { padding: 12px 24px !important; background-color: #3130F2 !important; border-radius: 37px !important; color: white !important; font-weight: 700 !important;}.blue-button:hover { background-color: #FECD00 !important; transition: all .25s ease-in-out 0s !important;}.closeButton { background-color: rgba(254, 205, 0, 0.4); border: 1px solid transparent; border-radius: 10px;}.closeButton:hover { background-color: rgba(254, 205, 0, 0.8); border: 1px solid #3130f2; border-radius: 10px;}.offcanvas-backdrop.show { opacity: 0.8;}.offcanvas-backdrop { background-color: #8E90A6;}.closeIcon { width: 40px; height: 40px;}.nav-link { padding: 0px !important; font-weight: 400; font-size: 20px !important; line-height: 40px !important; letter-spacing: 0.08em !important;}.nav-link:hover { color: #3130F2 !important; border-bottom-left-radius: 0%; border-bottom-right-radius: 0%; border-bottom: 3px solid #FECD00 !important; cursor: pointer !important; transition: all .18s ease-in-out 0s !important;}.nav-item:active a { background-color: #8E90A6 !important;}.navbar-nav .nav-link.active,.navbar-nav .show>.nav-link { color: #3130F2 !important; font-weight: 600; border-radius: 37px; border-bottom-left-radius: 0%; border-bottom-right-radius: 0%; border-bottom: 3px solid #FECD00;}.btn:hover { border-color: transparent !important;}
JavaScript (script.js):
var prevScrollpos = window.pageYOffset;window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbarSection").style.top = "0"; } else { document.getElementById("navbarSection").style.top = "-70px"; } prevScrollpos = currentScrollPos;};$(document).ready(function() { $(document).on("scroll", onScroll); //smoothscroll $(".navbar-toggler").on("click", function(e) { e.preventDefault(); $(document).off("scroll"); $(".closeIcon").on("click", function(e) { $(this).removeClass("active"); }); $(this).addClass("active"); var target = $(this).parents("div.container-fluid").find(".navbar-brand").attr("href") menu = target; $target = $(target); $("html, body") .stop() .animate({ scrollTop: $target.offset().top + 2, }, 500, "swing", function() { window.location.hash = target; $(document).on("scroll", onScroll); } ); });});function onScroll(event) { var scrollPos = $(document).scrollTop(); $("#navbarSection a").each(function() { var currLink = $(this); var refElement = $(currLink.attr("href")); if ( refElement.position().top scrollPos ) { $("#navbarSection ul li a").removeClass("active"); currLink.addClass("active"); } else { currLink.removeClass("active"); } });}
总结:
通过以上步骤，可以实现一个功能完善的导航栏，包括滚动显示/隐藏和导航链接激活。在实际应用中，可以根据具体需求进行调整和优化。例如，可以调整滚动动画的速度，修改激活状态的样式，或者添加更复杂的交互效果。 重要的是理解代码的逻辑和原理，才能灵活运用。
以上就是实现滚动显示/隐藏导航栏并激活导航链接的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1582263.html
微信扫一扫 
支付宝扫一扫 
