记一次ElementUI中，导航栏随浏览器顶部悬浮下滑

最新推荐文章于 2025-06-12 09:42:33 发布

Satsuki.Chan

最新推荐文章于 2025-06-12 09:42:33 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 - 学习一下下

本文链接：https://blog.youkuaiyun.com/weixin_44554160/article/details/86759850

前端 - 学习一下下专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了一款基于Vue框架的日历组件实现过程，通过使用el-row和el-col等Element UI组件来布局一周的天数，并实现了头部导航栏的固定效果。文章深入探讨了如何通过监听滚动事件来调整导航栏的显示状态，确保在页面滚动时，导航栏能够保持在顶部，为用户提供更好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<div class="week">
		<el-row id="nav-fixed" :class="{nav_fixed : isFixed}">
			<el-col :span="3">
				<div class="grid-content"><span class="sun">Sun.</span>日曜日</div>
			</el-col>
			<el-col :span="3">
				<div class="grid-content"><span class="mon">Mon.</span>月曜日</div>
			</el-col>
			<el-col :span="3">
				<div class="grid-content"><span class="tues">Tues.</span>火曜日</div>
			</el-col>
			<el-col :span="3">
				<div class="grid-content"><span class="wed">Wed.</span>水曜日</div>
			</el-col>
			<el-col :span="3">
				<div class="grid-content"><span class="thur">Tur.</span>木曜日</div>
			</el-col>
			<el-col :span="3">
				<div class="grid-content"><span class="fri">Fri.</span>金曜日</div>
			</el-col>
			<el-col :span="3">
				<div class="grid-content"><span class="sat">Sat.</span>土曜日</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'week',
		data() {
			return {
				isFixed: false,
				offsetTop: 0
			};
		},
		mounted() {
			// 设置bar浮动阈值为 #fixedBar 至页面顶部的距离
			this.offsetTop = document.querySelector('#nav-fixed').offsetTop;
			// 开启滚动监听
			window.addEventListener('scroll', this.handleScroll);
		},
		methods: {
			// 滚动监听  滚动触发的效果写在这里
 			handleScroll() {
 				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 				if (scrollTop >= this.offsetTop) {
 					this.isFixed = true;
 				} else {
 					this.isFixed = false;
 				}
 			}
		},
		destroyed() {
			// 离开页面 关闭监听 不然会报错
			window.removeEventListener('scroll', this.handleScroll);
		}
	}
</script>

<style>
	.week {
		margin-bottom: 1.25rem;
	}

	#nav-fixed {
		background: rgba(255, 255, 255, 0.8);
		border: 0;
		border-radius: 10px;
	}

	.nav_fixed {
		position: fixed;
		z-index: 2;
		top: 0;
		width: 77.2%;
	}

	.el-row {
		background: rgba(255,255,255,0);
		border-radius: 10px;
		line-height: 2.2rem;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		margin: 0.625rem 1.5rem;
	}

	.el-col div:hover {
		background: #E0E0E0;
		border-radius: 0.625rem;
		cursor: pointer;
		transition: all 0.5s;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.grid-content span {
		border: 1px solid;
		border-radius: 50px;
		padding: 5px;
		margin-right: 0.5rem;
	}

	.sun {
		color: #f60;
	}

	.mon {
		color: #c0c0c0;
	}

	.tues {
		color: #f00;
	}

	.wed {
		color: #6cf;
	}

	.thur {
		color: #6fc;
	}

	.fri {
		color: #ff0;
	}
</style>