仿照Vivo官网实现前端页面交互效果实现导航栏的悬浮效果html+css+js代码
时间: 2023-11-18 12:02:15 浏览: 47
好的,以下是实现导航栏悬浮效果的 HTML + CSS + JS 代码:
HTML:
```html
<nav class="navbar">
<a href="#" class="navbar-logo">Logo</a>
<ul class="navbar-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
```
CSS:
```css
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: #fff;
border-bottom: 1px solid #ddd;
z-index: 999;
}
.navbar-logo {
font-size: 24px;
font-weight: bold;
color: #333;
text-decoration: none;
}
.navbar-menu {
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.navbar-menu li {
margin-left: 20px;
}
.navbar-menu li a {
font-size: 16px;
color: #333;
text-decoration: none;
}
.navbar-menu li a:hover {
color: #f00;
}
```
JavaScript:
```javascript
var navbar = document.querySelector('.navbar');
var navbarOffsetTop = navbar.offsetTop;
function onScroll() {
if (window.pageYOffset >= navbarOffsetTop) {
navbar.classList.add('navbar-fixed');
} else {
navbar.classList.remove('navbar-fixed');
}
}
window.addEventListener('scroll', onScroll);
```
以上代码实现了一个带有悬浮效果的导航栏,当用户滚动页面时,导航栏会固定在页面顶部。实现效果类似于Vivo官网的导航栏悬浮效果。