CSS 粘性布局sticky：使用方法+代码示例

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入门教程】 - 【源代码+示例 300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	MapboxGL【入门教程】 - 【源代码+图文示例150+】
4	Cesium 【入门教程】 - 【源代码+综合教程 200+】
5	threejs【中文API】 - 【源代码+图文示例200+】
6	Shader 编程 【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程 【配置+应用教程 100+】
9	GIS数字孪生与大模型 【应用实战 100+】
10	报表与数字大屏 【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

什么是CSS的sticky

CSS 中的 position: sticky 是一种混合了相对定位（relative positioning）和固定定位（fixed positioning）特性的定位模式。当一个元素设置了 position: sticky 后，它在正常文档流中的行为类似于相对定位，但在满足特定滚动条件时，它会变为相对于其最近的滚动祖先（通常是带有滚动条的父容器，如果没有这样的祖先，则相对于视口）固定在某个位置。

使用条件

1. 元素的 position 属性需要设置为 sticky。
2. 必须为元素指定至少一个非 auto 的偏移量（例如 top, bottom, left, 或 right），这样才能决定在滚动到哪个位置时元素开始固定。
3. 元素的最近的滚动容器（ancestor）不能有 overflow 设置为 hidden 或 auto 且内容不足以滚动（即父容器高度不足时，sticky可能不会生效）。
4. 元素要在其滚动容器内可见，也就是说，直到元素到达其滚动容器的顶部（或底部，取决于你设置的偏移方向）时才会固定。

示例效果图

示例源代码：

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-03-14
*/

<template>
	<div class="djs-box">
		<div class="topBox">
			<h3>css的sticky功能演示</h3>
			<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<div class="dajianshi">           
				 <p v-for="(item,index) in restaurants" :key="index">
					 {{ item.name }}
				 </p>
			<div class="sticky-header"> sticky滚动到位置后，固定在某位置 </div>
			<p v-for="(item,index) in restaurants" :key="index">
								 {{ item.name }}
			</p>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				state1: '',
				restaurants: [
					{"name": "三全鲜食（北新泾店）",},
					{"name": "Hot honey 首尔炸鸡（仙霞路）",},
					{"name": "唦哇嘀咖",},
					{"name": "爱茜茜里(西郊百联)",},
					{"name": "爱茜茜里(近铁广场)",},
					{"name": "鲜果榨,汁（金沙江路和美广店）",},
					{"name": "开心丽果（缤谷店）",},
					{"name": "超级鸡车（丰庄路店）",},
					{"name": "三全鲜食（北新泾店）",},
					{"name": "Hot honey 首尔炸鸡（仙霞路）",},
					{"name": "唦哇嘀咖",},
					{"name": "爱茜茜里(西郊百联)",},
					{"name": "爱茜茜里(近铁广场)",},
					{"name": "鲜果榨,汁（金沙江路和美广店）",},
					{"name": "开心丽果（缤谷店）",},
					{"name": "超级鸡车（丰庄路店）",},
					{"name": "三全鲜食（北新泾店）",},
					{"name": "Hot honey 首尔炸鸡（仙霞路）",},
					{"name": "唦哇嘀咖",},
					{"name": "爱茜茜里(西郊百联)",},
					{"name": "爱茜茜里(近铁广场)",},
					{"name": "鲜果榨,汁（金沙江路和美广店）",},
					{"name": "开心丽果（缤谷店）",},
					{"name": "超级鸡车（丰庄路店）",}
				],

			}
		},
		mounted() {

		},
		methods: {


		}

	}
</script>
<style scoped>
	.djs-box {
		width: 1000px;
		height: 650px;
		margin: 50px auto;
		border: 1px solid black;
	}

	.topBox {
		margin: 0 auto 0px;
		padding: 10px 0 20px;
		background: black;
		color: #fff;
	}

	.dajianshi {
		width: 98%;
		margin: 0 auto;
		height: 520px; /* 仅为演示，设置一个有限高度以触发滚动 */
		overflow-y: auto; /* 必须允许滚动 */
		border: 1px solid #369;
		background-color: cde;
		position: relative;
	}

	
	.sticky-header {
	  position: sticky;
	  top: 0; /* 当元素滚动到距离顶部0px时开始固定 */
	  background-color: #f8f9fa;
	  width: 100%;
	  height: 40px;
	  padding: 10px 0;
	  color: red;
	  z-index: 1; /* 为了保证粘性元素不被其他浮动元素覆盖 */
	}
</style>

在这个例子中，.sticky-header 元素会在用户滚动 .dajianshi 内容，且 .sticky-header 达到距离顶部0像素时，固定在 .dajianshi 的顶部，如同页面顶部的固定导航栏。当向上滚动并越过 .sticky-header 的原始位置时，它就会保持在视口顶部，直到再次滚动回其自然位置。