页面滚动,顶部搜索栏(淡入淡出、默认透明),背景白色。怎么写
时间: 2024-02-18 15:01:47 浏览: 22
这个特性的实现需要使用HTML、CSS和JavaScript。具体的实现步骤如下:
1. HTML:在页面头部添加一个搜索栏的HTML代码,需要包含一个输入框和一个按钮。
```
<div class="search-bar">
<input type="text" placeholder="搜索...">
<button>搜索</button>
</div>
```
2. CSS:设置搜索栏的样式,包括位置、大小、颜色等属性。并且设置默认的透明度为0。
```
.search-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #fff;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
```
3. JavaScript:监听页面滚动事件,当页面滚动到一定位置时,显示搜索栏并设置透明度为1;当页面滚动回顶部时,隐藏搜索栏并设置透明度为0。
```
window.addEventListener('scroll', function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 100) {
document.querySelector('.search-bar').style.opacity = 1;
} else {
document.querySelector('.search-bar').style.opacity = 0;
}
});
```
这样就可以实现页面滚动时顶部搜索栏淡入淡出并设置默认透明度为0,背景为白色的效果了。当然,具体实现需要根据你的需求进行适当的调整。