要实现不同部分滚动时导航栏颜色不改变的效果,可以使用JavaScript监听页面滚动事件,根据滚动位置来判断导航栏是否需要改变颜色。以下是一个代码示例:
HTML部分:
CSS部分:
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent; /* 初始透明背景色 */
/* 其他导航栏样式 */
}
section {
height: 100vh;
/* 其他部分样式 */
}
JavaScript部分:
window.addEventListener('scroll', function() {
var navbar = document.getElementById('navbar');
var section1 = document.getElementById('section1');
var section2 = document.getElementById('section2');
var section3 = document.getElementById('section3');
// 获取各个部分的相对滚动位置
var section1Offset = section1.offsetTop - navbar.offsetHeight;
var section2Offset = section2.offsetTop - navbar.offsetHeight;
var section3Offset = section3.offsetTop - navbar.offsetHeight;
// 根据滚动位置判断导航栏是否需要改变颜色
if (window.pageYOffset >= section1Offset && window.pageYOffset < section2Offset) {
navbar.style.backgroundColor = 'red'; // 第一部分滚动时导航栏颜色不改变
} else if (window.pageYOffset >= section2Offset && window.pageYOffset < section3Offset) {
navbar.style.backgroundColor = 'blue'; // 第二部分滚动时导航栏颜色不改变
} else if (window.pageYOffset >= section3Offset) {
navbar.style.backgroundColor = 'green'; // 第三部分滚动时导航栏颜色不改变
} else {
navbar.style.backgroundColor = 'transparent'; // 其他情况下导航栏透明
}
});
上述代码中,我们首先使用addEventListener
函数监听scroll
事件,当页面滚动时会触发回调函数。在回调函数中,我们获取导航栏和各个部分的元素节点,并计算出各个部分的相对滚动位置。然后根据滚动位置来判断导航栏是否需要改变颜色,如果滚动位置在某个部分的范围内,就设置对应的背景颜色;否则,设置为透明背景色。这样就能实现不同部分滚动时导航栏颜色不改变的效果。
下一篇:不同部分上粒子颜色改变