怎么实现页面顶部栏是透明的,往下滚动时慢慢显示出来
时间: 2024-02-27 12:51:19 浏览: 29
你可以使用 `position: fixed` 和 `z-index` 属性将页面顶部栏固定在页面顶部,并设置其 `background-color` 为透明,然后使用 `scroll` 事件监听页面滚动,当滚动距离大于等于某个值时,设置顶部栏的 `background-color` 为需要的颜色值,实现慢慢显示出来的效果。具体代码如下:
```html
<template>
<div class="wrapper">
<div class="header" :style="{ backgroundColor: headerBgColor }">
<!-- 顶部栏内容 -->
</div>
<div class="content">
<!-- 页面内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
headerBgColor: "transparent"
};
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
handleScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop >= 100) {
this.headerBgColor = "#ffffff"; // 设置顶部栏背景颜色为白色
} else {
this.headerBgColor = "transparent"; // 设置顶部栏背景颜色为透明
}
}
}
};
</script>
<style>
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: transparent;
z-index: 999;
transition: background-color 0.5s ease;
}
</style>
```
其中,`handleScroll` 方法用来处理滚动事件,当滚动距离 `scrollTop` 大于等于 100 时,设置顶部栏的 `background-color` 为白色;否则,设置为透明。`transition` 属性用来设置背景颜色渐变的过渡效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)