本文档旨在提供一种解决方案，用于实现导航栏在页面滚动时自动显示/隐藏，并根据用户在页面上的位置或点击的导航链接，动态激活对应的导航项。该方案结合了 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 类，否则移除。
注意事项:
当用户点击导航链接时，需要平滑滚动到对应的 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 事件监听。
关键点：
下面是完整的 HTML、CSS 和 JavaScript 代码示例：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar on scroll</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container" id="navbarSection">
<nav class="navbar navbar-expand-lg" aria-label="Offcanvas navbar large">
<div class="container-fluid">
<a class="navbar-brand" href="#heroSection"><img src="./Assets/logo.svg" alt="" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end mx-auto" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
<div class="offcanvas-header">
<a class="navbar-brand" href="#heroSection"><img src="./Assets/logo.svg" alt="" /></a>
<button type="button" data-bs-dismiss="offcanvas" aria-label="Close" class="closeButton">
<img class="closeIcon" src="./Assets/cross.png" alt="Close Icon" />
</button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav align-items-center mx-auto mb-2 mb-lg-0">
<li class="nav-item heroSection">
<a class="nav-link active" href="#heroSection">About Us</a>
</li>
<li class="nav-item serviceSection">
<a class="nav-link" href="#serviceSection">Services</a>
</li>
<li class="nav-item workSection">
<a class="nav-link" href="#workSection">Work</a>
</li>
</ul>
<div class="contact-us-button">
<button class="btn blue-button">
<a href="#contactSection" style="text-decoration: none; color: white">Contact Us</a>
</button>
</div>
</div>
</div>
</div>
</nav>
</div>
<section id="heroSection">
Hero Section
</section>
<section id="workSection">
Work Section
</section>
<section id="aboutusSection">
About Us Section
</section>
<section id="serviceSection">
Service Section
</section>
<section id="contactSection">
Contact Section
</section>
<script src="script.js"></script>
</body>
</html>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");
}
});
}总结:
通过以上步骤，可以实现一个功能完善的导航栏，包括滚动显示/隐藏和导航链接激活。在实际应用中，可以根据具体需求进行调整和优化。例如，可以调整滚动动画的速度，修改激活状态的样式，或者添加更复杂的交互效果。 重要的是理解代码的逻辑和原理，才能灵活运用。
以上就是实现滚动显示/隐藏导航栏并激活导航链接的详细内容，更多请关注php中文网其它相关文章！
Windows激活工具是正版认证的激活工具，永久激活，一键解决windows许可证即将过期。可激活win7系统、win8.1系统、win10系统、win11系统。下载后先看完视频激活教程，再进行操作，100%激活成功。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
447
收藏
