首页导航栏在顶端背景透明，滚动滚动条导航栏背景变成为白色

导航栏在顶端背景透明，滚动滚动条导航栏背景变成为白色

时间: 2023-11-17 21:07:16 浏览: 205

要实现导航栏在顶端背景透明，滚动滚动条时导航栏背景变为白色的效果，你可以使用JavaScript来监听滚动事件，并在滚动时改变导航栏的背景色。下面是一个示例代码，你可以根据实际情况进行调整： ```html <!DOCTYPE html> <html> <head> <style> body { height: 2000px; /* 用于产生滚动条 */ margin: 0; padding: 0; } .navbar { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: transparent; transition: background-color 0.3s ease; z-index: 999; /* 确保导航栏在最上层 */ } .navbar-inner { background-color: transparent; } body::-webkit-scrollbar { width: 10px; /* 设置滚动条宽度 */ } body::-webkit-scrollbar-track { background-color: #fff; /* 设置滚动条背景色为白色 */ } body::-webkit-scrollbar-thumb { background-color: #888; /* 设置滚动条滑块颜色 */ } </style> </head> <body> <div class="navbar"> <div class="navbar-inner">  </div> </div>  <script> window.addEventListener('scroll', function() { var navbar = document.querySelector('.navbar'); if (window.scrollY > 0) { navbar.style.backgroundColor = '#fff'; // 滚动时将导航栏背景设置为白色 } else { navbar.style.backgroundColor = 'transparent'; // 滚动到顶部时将导航栏背景设置为透明 } }); </script> </body> </html> ``` 在这个示例中，我们使用JavaScript监听`scroll`事件，并通过`window.scrollY`来获取滚动的垂直距离。当滚动距离大于0时，将导航栏的背景色设置为白色(`#fff`)，否则将背景色设置为透明。记得根据你的项目需求进行相应的修改。

阅读全文