来源：我的博客站 OceanicKang |《VUE 实现滚动监听 导航栏置顶》

HTML

非重点的代码，比如样式啥的，我就不放上来了，一笔带过

简略的写一下html代码，应该不难理解

<div :style="{ paddingBottom: paddingBottom}">

	<header>资源信息</header>
	
	<div>
		<!-- 公司信息 浏览量 -->
	</div>

	<div id="fixedBar" :class="{ fixedBar: isFixed }">
		<!-- 品名 -->
		<!-- 规格 -->
		<!-- 产地 -->
		<!-- 单价 -->
	</div>

	<div :style="{ marginTop: marginTop }">
		<!-- 数据列表 -->
	</div>

	<footer class="footer">
		<button>订阅</button>
		<button>关闭</button>
		<div v-show="advertShow">
			<a @click="del">×</a>
			<img src="./广告.jpg" />
		</div>
	</footer>
	
</div>

<style>
	.fixedBar {
	    position: fixed;
	    top: 0;
	    z-index: 999;
	    width: 100%;
	}
</style>

VUE

1. data ()

data () {
	paddingBottom: '1.5rem', // 给最外层div一个padding-bottom
	// 因为footer是fixed定位 如果padding-bottom为0 数据列表拉到最下面的时候 会有部分数据被footer挡住
	
	isFixed: false, // bar浮动
	offsetTop: 0,   // 触发bar浮动的阈值
	marginTop: 0,   // 触发bar浮动的同时 给数据列表一个margin-top 防止列表突然上移 会很突兀

	advertShow: true, // 广告显示
}

2. mounted ()

mounted () {
	// 设置初始的 padding-bottom 值为 footer 的高度 +20 防止数据列表拉到最下面被footer挡住 +多少自定
	this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';

	// 设置bar浮动阈值为 #fixedBar 至页面顶部的距离
	this.offsetTop = document.querySelector('#fixedBar').offsetTop;

	// 开启滚动监听
	window.addEventListener('scroll', this.handleScroll);
}

3. methods

methods: {
	// 关闭广告
	del () {
		this.advertShow = true;
		this.$nextTick(() => {
			this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';
		});
	},

	// 滚动监听  滚动触发的效果写在这里
	handleScroll () {
		var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

		if (scrollTop >= this.offsetTop) {
			this.isFixed = true;
			this.marginTop = document.querySelector('#fixedBar').offsetHeight + 'px';
		} else {
			this.isFixed = false;
			this.marginTop = 0;
		}
	}
}

4. destroyed ()

destroyed () {
    window.removeEventListener('scroll', this.handleScroll); // 离开页面 关闭监听 不然会报错
}