uniapp导航栏滚动到顶部后固定

最新推荐文章于 2024-07-03 17:07:00 发布

子籽籽

最新推荐文章于 2024-07-03 17:07:00 发布

阅读量733

点赞数

文章标签： Vue 滚动事件导航栏固定元素高度 JavaScript

本文链接：https://blog.csdn.net/qq_42786138/article/details/124767724

版权

<template>
	<view class="main">
		<view class="hand" ref='handHeight'>
			<!-- 内容块 -->
		</view>
		<view class="nav" :class="flag?'fixed':''">
			<view class="dataInfo">
				<view class="list">
					<text>aaa</text>
				</view>
				<view class="list">
					<text>bbb</text>
				</view>
				<view class="list">
					<text>ccc</text>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				flag: false
			}
		},
		onPageScroll() {
			var scrollHeight = document.documentElement && document.documentElement.scrollTop //获取滚动条的高度
			var handHeight = this.$refs.handHeight.$el.offsetHeight //获取元素高度
			console.log(this.$refs.handHeight)
			if (scrollHeight >= handHeight) {
				this.flag = true
			} else {
				this.flag = false
			}
		}
 
	}
</script>
 
 
<style>
	.main {
		height: 5000rpx;
	}
 
	.hand {
		background-color: #007AFF;
		border: 1px solid #777;
		height: 1000rpx;
	}
 
	.nav .dataInfo {
		display: flex;
		justify-content: space-around;
		text-align: center;
		line-height: 80rpx;
		height: 80rpx;
	}
 
	.nav .dataInfo .list {
		border: 1px solid #000;
		width: 100%;
		margin-right: 20rpx;
		box-sizing: border-box;
	}
 
	.nav .dataInfo .list:last-child {
		margin-right: 0;
	}
 
	.nav .dataInfo .list text {
		font-size: 30rpx;
		color: #000;
		font-weight: bold;
		display: block;
	}
 
	.fixed {
		position: fixed;
		width: 100%;
		top: 88rpx;
		left: 0;
	}
</style>