元素实现吸顶

1、position: sticky

直接设置元素需要吸顶的距离，

<!-- App.vue -->
<template>
  <div id="app">
    <!-- <List
      :items="items"
      :size="60"
      :shownumber="10"
    /> -->
	<div id="topHeight">
		<div v-for="item in 20"> 
    		{{ item }} 2
   	 	</div>
	</div>
    
    <div class="sticky"
		id="sticky"
	>
    	<div>
			黏性布局了
		</div>
    </div>
    <div v-for="item in 100">
        {{ item }}
    </div>
  </div>
</template>

<script>
const rafThrottle = (fn) => {
    let locked = false;
    return function (...args) {
        if (locked) return;
			locked = true;
			window.requestAnimationFrame(_ => {
			fn.apply(this, args);
			locked = false;
        });
    };
}
// import List from './components/List.vue'
export default {
	name: 'App',
	components: {
		// List,
	},
	data(){
		return {
			headerOriginalPos: 0,
		}
	},
	computed: {
		// 要进行渲染的数据列表
		items () {
			// 自己模拟一万条数据，将其内容进行填充
			return Array(1000).fill('').map((item, index) => ({
				id: index,
				content: '列表项内容' + index
			}))
		}
	},

	mounted() {
		this.headerOriginalPos = document.getElementById('sticky').offsetTop;
		window.addEventListener('scroll', this.scrollEvent);
	},

	beforeDestroy() {
		window.removeEventListener('scroll', this.scrollEvent);
	},
	methods: {
		// https://blog.csdn.net/weixin_56006480/article/details/130819249?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7ERate-2-130819249-blog-135112496.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7ERate-2-130819249-blog-135112496.235%5Ev43%5Epc_blog_bottom_relevance_base3&utm_relevant_index=3
		scrollEvent: rafThrottle(async function(e) {
			// let header = document.getElementById('sticky');
			// var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			// if (scrollTop >= this.headerOriginalPos) {
			// 	header.style.position = 'fixed';
			// 	header.style.top = '40px';
			// 	header.style.width = '100%';
			// 	header.style.zIndex = '999';
			// } else {
			// 	header.style.position = 'static';
			// }
		})
	},
}
</script>

<style>
.sticky{
    position: sticky;
    top: 40px;
}
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}
</style>

2.通过js判断当前元素的初始的offsetTop，与当前滚动条滚动的距离做判断。修改元素的样式

<!-- App.vue -->
<template>
  <div id="app">
    <!-- <List
      :items="items"
      :size="60"
      :shownumber="10"
    /> -->
	<div id="topHeight">
		<div v-for="item in 20"> 
    		{{ item }} 2
   	 	</div>
	</div>
    
    <div class="sticky"
		id="sticky"
	>
    	<div>
			黏性布局了
		</div>
    </div>
    <div v-for="item in 100">
        {{ item }}
    </div>
  </div>
</template>

<script>
const rafThrottle = (fn) => {
    let locked = false;
    return function (...args) {
        if (locked) return;
			locked = true;
			window.requestAnimationFrame(_ => {
			fn.apply(this, args);
			locked = false;
        });
    };
}
// import List from './components/List.vue'
export default {
	name: 'App',
	components: {
		// List,
	},
	data(){
		return {
			headerOriginalPos: 0,
		}
	},
	computed: {
		// 要进行渲染的数据列表
		items () {
			// 自己模拟一万条数据，将其内容进行填充
			return Array(1000).fill('').map((item, index) => ({
				id: index,
				content: '列表项内容' + index
			}))
		}
	},

	mounted() {
		this.headerOriginalPos = document.getElementById('sticky').offsetTop;
		window.addEventListener('scroll', this.scrollEvent);
	},

	beforeDestroy() {
		window.removeEventListener('scroll', this.scrollEvent);
	},
	methods: {
		// https://blog.csdn.net/weixin_56006480/article/details/130819249?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7ERate-2-130819249-blog-135112496.235%5Ev43%5Epc_blog_bottom_relevance_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7ERate-2-130819249-blog-135112496.235%5Ev43%5Epc_blog_bottom_relevance_base3&utm_relevant_index=3
		scrollEvent: rafThrottle(async function(e) {
			let header = document.getElementById('sticky');
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			if (scrollTop >= this.headerOriginalPos) {
				header.style.position = 'fixed';
				// top值为当前需要吸顶的距离，可根据自己的需求调整
				header.style.top = '100px';
				header.style.width = '100%';
				header.style.zIndex = '999';
			} else {
				header.style.position = 'static';
			}
		})
	},
}
</script>

<style>
.sticky{
    /* position: sticky;
    top: 40px; */
}
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}
</style>