本文档旨在提供一种解决方案，用于实现导航栏在页面滚动时自动显示/隐藏，并根据用户在页面上的位置或点击的导航链接，动态激活对应的导航项。该方案结合了 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 &&
refElement.position().top + refElement.height() > 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 &&
refElement.position().top + refElement.height() > scrollPos
) {
$("#navbarSection ul li a").removeClass("active");
currLink.addClass("active");
} else {
currLink.removeClass("active");
}
});
}总结:
通过以上步骤，可以实现一个功能完善的导航栏，包括滚动显示/隐藏和导航链接激活。在实际应用中，可以根据具体需求进行调整和优化。例如，可以调整滚动动画的速度，修改激活状态的样式，或者添加更复杂的交互效果。 重要的是理解代码的逻辑和原理，才能灵活运用。
