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=3scrollEvent: 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=3scrollEvent: 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>