设计一个当窗口滚动20px时出现淡入效果的导航栏
时间: 2024-03-20 18:43:09 浏览: 16
可以使用 jQuery 库中的 animate() 函数和 scrollTop 属性实现当窗口滚动 20px 时出现淡入效果的导航栏。以下是一个示例代码:
HTML 代码:
```
<nav class="navbar">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul>
</nav>
```
CSS 代码:
```
.navbar {
position: fixed;
top: -60px;
width: 100%;
background-color: #333;
}
.navbar ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.navbar li {
display: inline-block;
margin: 20px;
font-size: 20px;
}
.navbar a {
color: #fff;
text-decoration: none;
}
```
jQuery 代码:
```
$(window).scroll(function() {
if ($(this).scrollTop() > 20) {
$('.navbar').stop().animate({ 'top': '0px' }, 500);
} else {
$('.navbar').stop().animate({ 'top': '-60px' }, 500);
}
});
```
解释:
首先,我们将导航栏的位置设置为固定位置(position:fixed)并将其顶部位置设置为负数(top:-60px),这样它就会从页面顶部隐藏。
接下来,我们使用 jQuery 监听窗口滚动事件。当窗口滚动时,如果滚动距离大于 20px,我们就使用 animate() 函数将导航栏从顶部淡入显示出来;否则,我们将其隐藏。
在 animate() 函数中,我们将 top 属性设置为 0px 或 -60px,这样导航栏就会平滑地移动到指定的位置,并带有淡入效果。我们在 animate() 函数中还设置了一个 500ms 的过渡时间(duration),使其显得更加自然。