以下是一个简单的实现
纵向滚动导航栏并且带有渐变
效果的
HTML、
CSS和JS代码示例：
HTML代码：
```
html
<
div id="navbar">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
</ul>
</
div>
<
div id="section1">
<h2>Section 1</h2>
<p>Content goes here...</p>
</
div>
<
div id="section2">
<h2>Section 2</h2>
<p>Content goes here...</p>
</
div>
<
div id="section3">
<h2>Section 3</h2>
<p>Content goes here...</p>
</
div>
<
div id="section4">
<h2>Section 4</h2>
<p>Content goes here...</p>
</
div>
<
div id="section5">
<h2>Section 5</h2>
<p>Content goes here...</p>
</
div>
```
CSS代码：
```
css
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
}
#navbar ul {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#navbar li {
margin: 0 20px;
}
#navbar a {
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: bold;
transition: color 0.2s ease-out;
}
#navbar a:hover {
color: #f00;
}
.active {
color: #f00 !important;
}
#section1 {
height: 500px;
background-color: #eaeaea;
}
#section2 {
height: 500px;
background-color: #dcdcdc;
}
#section3 {
height: 500px;
background-color: #cfcfcf;
}
#section4 {
height: 500px;
background-color: #bfbfbf;
}
#section5 {
height: 500px;
background-color: #afafaf;
}
```
JS代码：
```javascript
window.addEventListener("scroll", function() {
let navbar = document.getElementById("navbar");
let sections = document.querySelectorAll("section");
let currentSectionIndex = 0;
let currentSection = sections[currentSectionIndex];
for (let i = 1; i < sections.length; i++) {
if (window.pageYOffset >= sections[i].offsetTop - navbar.offsetHeight) {
currentSectionIndex = i;
currentSection = sections[i];
}
}
let links = document.querySelectorAll("#navbar a");
links.forEach(link => link.classList.remove("active"));
let activeLink = document.querySelector(`#navbar a[href="#${currentSection.id}"]`);
activeLink.classList.add("active");
let percent = (window.pageYOffset - currentSection.offsetTop + navbar.offsetHeight) / (currentSection.offsetHeight - navbar.offsetHeight);
let rgba = `rgba(0, 0, 0, ${percent * 0.8})`;
navbar.style.backgroundColor = rgba;
});
```
代码解释：
-
HTML代码中包含一个固定在
页面顶部的导航栏和一些带有ID的部分。
-
CSS代码中设置了导航栏的样式以及每个部分的背景颜色。
- JS代码中为窗口
滚动事件添加了监听器，用于检测当前
滚动到哪个部分，并且更新导航栏的样式。在
滚动过程中，导航栏的背景色会渐变，从透明到不透明。渐变的程度取决于
滚动到当前部分的百分比。同时，导航栏中当前部分的链接会被高亮显示。
希望这个示例能够帮助到你实现
纵向滚动导航栏并且带有渐变
效果的功能。
6623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
