鼠标滚动后出现背景
举个例子：
当前有个需求，导航条置顶，初时没有背景，鼠标滚动后出现阴影背景，并一直存在。
图示
初始状态：
鼠标向下滚动，阴影背景出现：
解决步骤：
1. 编写置顶的导航条(放在Header.vue中)
<template>
<div class="header-container">
<!-- 导航内容 -->
<ul class="navigate-box">
<li class="navigate-item" v-for="(item,key) in navList" :key="key">
<router-link :to="item.path" active-class="active">{{item.name}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return{
navList:[
{name: "首页", path: "/homepage"},
{name: "页面1", path: ""},
{name: "页面2", path: ""},
{name: "页面3", path: "/industryApplication"},
{name: "页面4", path: ""},
{name: "页面5", path: ""},
{name: "页面6", path: ""},
]
}
}
}
</script>
<style scoped lang="scss">
.header-container{
display: flex;
align-items: center; /* 垂直居中 */
left: 0px;
top: 0px;
width: 100%;
height: 64px;
background-color: rgba(00, 00, 0040, 0);
padding:15px 0px;
.navigate-box{
position: absolute;
right: 40px;
width: auto;
height: 20px;
background-color: rgba(00, 00, 0040, 0);
display: flex;
list-style-type: none;
.navigate-item{
width: auto;
height: 20px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 14px;
text-align: center;
margin-left: 48px;
&:first-child{
margin: 0;
}
a{
text-decoration: none; /* 去除下划线 */
color: #54526D;
margin: 0 auto;
}
}
}
}
</style>
2. 将导航条固定在页面顶端，同时编写阴影背景div(在App.vue中 )
3. 编写鼠标滚动效果
<template>
<div class="app">
<!-- 导航条 -->
<div class="navigation-container">
<Header class="navigation-box"></Header>
<div class="shadow-bar" :style="{ opacity : showBackground ? '1':'0'}"></div>
</div>
<router-view></router-view>
</div>
</template>
<script>
import Header from './components/Header.vue'
export default {
name: 'App',
components:{
Header
},
data(){
return{
showBackground:false
}
},
methods:{
handleScroll() { //处理导航条背景，同时处理返回顶部的按钮
// 获取页面滚动的垂直距离。这里使用了逻辑或操作符来确保在所有浏览器中都能正确获取到scrollTop的值。
// window.pageYOffset是标准属性，但在某些老旧的浏览器中可能不支持，因此提供了备选方案。
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
// 假设当滚动超过64px时显示背景
if (scrollTop > 66) {
this.showBackground = true;
} else {
this.showBackground = false;
}
}
},
mounted() {
// 向window对象添加滚动事件监听器，当页面滚动时，会调用handleScroll方法。
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
// 移除之前添加到window对象的滚动事件监听器，防止内存泄漏。
// 同样地，这里直接使用this.handleScroll作为监听器的引用是可行的，因为Vue的methods方法会绑定到组件实例上。
window.removeEventListener('scroll', this.handleScroll);
},
}
</script>
<style <style lang="scss" scoped>
#app{
width: 100%;
height: 100%;
position: absolute;
margin:0;
padding: 0;
background-color: #eeeeee;
z-index: 1;
}
.navigation-container{
position: fixed; /*固定在页面上*/
z-index: 100;
.navigation-box{
position: fixed; /*固定在页面上*/
height: 64px;
padding: 0;
margin: 0;
z-index: 100;
}
.shadow-bar{
position: fixed; /*固定在页面上*/
width: 100%;
height: 64px;
background: #00000040;
backdrop-filter:blur(10px);
z-index: 99;
opacity: 0;
transition: opacity 0.5s ease;
}
}
</style>
回到顶部按钮
需求：
有一个回到顶部按钮，固定在屏幕左下角。初始是隐藏的，鼠标向下滚动屏幕高度一半距离以后，按钮出现；点击按钮回到页面顶部。
解决方式
- 编写按钮
- 编写样式
- 添加点击功能函数
代码
<template>
<div class="homepage-container">
<!-- banner -->
<div class="siedbar-container">
<div class="top-box" @click = "scrollToTop" v-if="goTopVisible">
<div class="top-btn"></div>
</div>
</div>
</div>
</div>
<script>
export default {
name: 'HomePage',
data() {
return{
goTopVisible:false, //控制是否可见
}
},
methods:{
handleScroll() { //处理返回顶部的按钮
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; //获取当前滚动位置
let screenHeight = window.innerHeight; //获取屏幕高度
//当滚动距离大于规定高度以后，控制按钮出现
if(scrollTop > screenHeight / 2) this.goTopVisible = true;
else this.goTopVisible = false;
},
scrollToTop() { //滚动到屏幕顶端功能函数，每次滚动一小步，一步到位视觉效果不佳
// 定义一个内部函数来处理滚动逻辑
const scrollStep = () => {
// 获取当前页面滚动的垂直距离
const c = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
if (c > 0) {
// 滚动一小段距离
const newScrollPosition = Math.max(0, c - c / 10); // 确保不会滚动到负数位置
// scrollTo方法，用于将浏览器窗口滚动到指定的位置。这个方法接受两个参数，分别代表水平滚动距离和垂直滚动距离。
window.scrollTo(0, newScrollPosition);
// 执行动画并请求浏览器在下次重绘之前调用指定的函数来更新动画的方法
window.requestAnimationFrame(scrollStep);
}
};
scrollStep(); // 启动滚动过程
}
},
mounted() {
// 向window对象添加滚动事件监听器，当页面滚动时，会调用handleScroll方法。
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
// 移除之前添加到window对象的滚动事件监听器，防止内存泄漏。
// 同样地，这里直接使用this.handleScroll作为监听器的引用是可行的，因为Vue的methods方法会绑定到组件实例上。
window.removeEventListener('scroll', this.handleScroll);
},
}
</script>
siedbar-container{
.siedbar-box{
position: fixed;
z-index: 100;
right: 1.25%;
bottom: 13.7%;
width: 48px;
height: 109px;
background: #0271E3;
box-shadow: 0 4px 16px 0 #0000001a;
border-radius: 28px;
display: flex;
flex-direction: column;
align-items: center;
.top-box{
position: fixed; /*固定在屏幕上*/
z-index: 100;
right: 1.25%;
bottom: 5.56%;
width: 48px;
height: 48px;
background: #fffffff2;
border-radius: 50%;
box-shadow: 0 0 16px 0 #0000001a;
display: flex;
align-items: center;
margin:0;
flex-shrink: 1;
.top-btn{
width: 24px;
height: 24px;
margin:0 auto;
object-fit: contain;
background-image: url('@/assets/images/HomePage/siedbar/top.png');
background-size: cover; /* 覆盖整个容器，图片可能会被裁剪以填满容器 */
background-position: center; /* 图片居中显示 */
flex-shrink: 1;
}
&:hover{ /*添加鼠标经过按钮*/
cursor: pointer; /*鼠标经过变成小手*/
.top-btn{
background-image: url('@/assets/images/HomePage/siedbar/top-hover.png');
}
}
}
}