文章目录
- 一、效果
- 二、创建容器
- 三、监听滚动，切换 position
- 四、引用 js 变量
- 五、总结
一、效果
- 吸顶元素跟随页面向上滚动而滚动，达到一定高度后吸附在容器顶部；
- 容器向下滚动到一定高度后，吸顶元素不再吸附，并跟随滚动条向下滚动。
二、创建容器
.home-wrapper: 外部容器
.lingxi-fixed: 吸顶元素
.container : 页面的其它内容
<div ref="scrollRef" class="home-wrapper"><section class="lingxi-fixed">...</section><div class="container">...</div>
</div>
三、监听滚动，切换 position
- 监听容器滚动事件，切换吸顶元素的 position 属性，达到吸顶效果
throttle为 lodash 节流函数，减少页面的重绘
import { throttle } from 'lodash-es';const scrollRef = ref();
// CSS 盒子
const cssBox = reactive({lingxiPosition: 'static',lingxiTop: '0',
});// 监听滚动
const homeScrollEven = throttle((e: any) => {if (scrollRef.value.scrollTop > 106) {cssBox.lingxiPosition = 'sticky';cssBox.lingxiTop = '-106px';} else {cssBox.lingxiPosition = 'static';cssBox.lingxiTop = '0';}
}, 200);onMounted(() => {scrollRef.value.addEventListener('scroll', homeScrollEven, false);
});onBeforeUnmount(() => {scrollRef.value.removeEventListener('scroll', homeScrollEven, false);
});
四、引用 js 变量
- 样式使用 SCSS 框架，引用 js 变量，而不直接操作元素。
.home-wrapper {width: 100%;height: 100%;overflow-y: auto;
}
.lingxi-fixed {--lingxiPosition: v-bind(cssBox.lingxiPosition);--lingxiTop: v-bind(cssBox.lingxiTop);width: 100%;z-index: 10;box-sizing: border-box;padding: 10px 80px;background-color: #f9f9fb;box-shadow: #f9f9fb 0px 5px 10px;position: var(--lingxiPosition);top: var(--lingxiTop);
}
五、总结
- 元素吸顶效果，依赖于
position: sticky或fixed浮动属性； - 监听容器滚动，判断容器的 scrollTop 值是否到达阈值。在阈值边界切换
position属性； position: sticky和fixed两者都能在文档流中表示浮动，其它属性值（如top）设置也相似。不同的是fixed相对于<body>元素浮动。而sticky相对父元素浮动。通常情况，<body>容器内的元素设置了fixed，会遮盖容器的滚动条。设置sticky属性不会出现这种情况。
