实现这种效果，有一个主导航，次导航在页面内banner下面，次导航有四个部分，随着鼠标滚动，次导航固定到主导航的下面，鼠标滚动到对应的描述时，次导航对应的部分背景色变为绿色
<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: #f0f0f0;
}
#banner {
height: 300px;
background-color: #ccc;
}
#subnav {
top: 50px;
width: 100%;
height: 50px;
background-color: transparent;
transition: background-color 0.3s;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
#subnav li {
flex: 1;
text-align: center;
}
#subnav li.active {
background-color: green;
}
.section {
height: 500px;
}
.section.section1 {
background-color: #ffcccc;
}
.section.section2 {
background-color: #ccffcc;
}
.section.section3 {
background-color: #ccccff;
}
.section.section4 {
background-color: #ffffcc;
}
</style>
</head>
<body>
<!-- 主导航栏 -->
<div id="navbar">
<!-- 主导航栏内容 -->
</div>
<!-- Banner -->
<div id="banner">
<!-- Banner 内容 -->
</div>
<!-- 次导航栏 -->
<div id="subnav">
<ul>
<li class="active">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</div>
<!-- 页面内容 -->
<div class="section section1">
<!-- 第一部分内容 -->
</div>
<div class="section section2">
<!-- 第二部分内容 -->
</div>
<div class="section section3">
<!-- 第三部分内容 -->
</div>
<div class="section section4">
<!-- 第四部分内容 -->
<h1>ss</h1>
<h1>ss</h1>
<h1>ss</h1>
<h1>ss</h1>
<h1>ss</h1>
<h1>ss</h1>
<h1>ss</h1>
<h1>ss</h1>
<h1>ss</h1>
<h1>ss</h1>
<h1>ss</h1>
<h1>ss</h1><h1>ss</h1><h1>ss</h1><h1>ss</h1>
</div>
<script>
window.addEventListener('scroll', function() {
var subnav = document.getElementById('subnav');
var sections = document.querySelectorAll('.section');
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
// 检查当前滚动位置所在的部分
var currentSection = null;
sections.forEach(function(section) {
var sectionTop = section.offsetTop;
var sectionHeight = section.offsetHeight;
if (scrolled >= sectionTop && scrolled < sectionTop + sectionHeight) {
currentSection = section;
}
});
// 更新次导航栏的背景色
var navLinks = document.querySelectorAll('#subnav li');
navLinks.forEach(function(link) {
link.classList.remove('active');
});
if (currentSection !== null) {
var sectionIndex = Array.from(sections).indexOf(currentSection);
if (sectionIndex >= 0) {
navLinks[sectionIndex].classList.add('active');
}
}
// 切换次导航栏的固定状态
if (scrolled >= banner.offsetHeight) {
subnav.style.position = 'fixed';
} else {
subnav.style.position = 'static';
}
});
</script>
</body>
</html>本文来自投稿，不代表本站立场，如若转载，请注明出处：https://typecho.firshare.cn/archives/2135.html
免责声明：文章内容不代表本站立场，本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺，仅供读者参考，文章版权归原作者所有。避免网络欺诈，本站不倡导任何交易行为。如您私自与本站转载自公开互联网中的资讯内容中提及到的个人或平台产生交易，则需自行承担后果。本站在注明来源的前提下推荐原文至此，仅作为优良公众、公开信息分享阅读，不进行商业发布、发表及从事营利性活动。如本文内容影响到您的合法权益（内容、图片等），请及时联系本站，我们会及时删除处理。
