html纵向滚动导航栏,html+css+js实现导航栏滚动渐变效果
时间: 2023-06-29 13:06:12 浏览: 107
以下是一个简单的实现纵向滚动导航栏并且带有渐变效果的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代码中为窗口滚动事件添加了监听器,用于检测当前滚动到哪个部分,并且更新导航栏的样式。在滚动过程中,导航栏的背景色会渐变,从透明到不透明。渐变的程度取决于滚动到当前部分的百分比。同时,导航栏中当前部分的链接会被高亮显示。
希望这个示例能够帮助到你实现纵向滚动导航栏并且带有渐变效果的功能。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)