vue需求之吸顶

先看效果图

先上html代码

<view class="box">
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<view class="box_fixed" id="boxFixed" :class="{ is_fixed: isFixed }">我是来测试的、哇咔咔</view>
			<h3>快下来</h3>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
			<h4>吸顶测试</h4>
		</view>

js代码

export default {
	data() {
		return {
			isFixed: false,
			offsetTop: 0
		};
	},
	mounted() {
		window.addEventListener('scroll', this.initHeight);
		this.$nextTick(() => {
			this.offsetTop = document.querySelector('#boxFixed').offsetTop;
		});
	},
	methods: {
		initHeight() {
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			this.isFixed = scrollTop > this.offsetTop ? true : false;
		}
	},
	destroyed() {
		window.removeEventListener('scroll', this.handleScroll);
	}
};

css代码

.box_fixed {
	width: 500px;
	height: 40px;
	border: 2px dashed pink;
	border-radius: 20px;
	margin: 0 auto;
	line-height: 40px;
	background: #eee;
}
.is_fixed {
	position: fixed;
	top: 0;
	z-index: 999;
}

本文转载，原文来源于：https://blog.csdn.net/zbwroom/article/details/81911909