滚动到顶部时吸附

  最近一个简单的官网项目中,有滑动到顶部时将标题栏吸顶的优化需求,记录一下。

1
2
3
4
<!--横标题部分-->
<div class="px-title title" :class="{ 'fixed': fixed }">
标题
</div>
1
2
3
4
5
6
7
8
9
data () {
fixed: false
},
mounted () {
// 滚动后吸顶
window.addEventListener('scroll', () => {
this.fixed = this.$refs['topBgRef'].getBoundingClientRect().bottom < 0
}, true)
}
1
2
3
4
5
6
7
8
9
.px-title {
&.fixed {
width: 100%;
box-shadow: 0 16px 16px -20px #5E5E5E;
position: fixed;
top: 0;
z-index: 2;
}
}

  参考资料:Element.getBoundingClientRect()

以上

随笔标题:滚动到顶部时吸附

随笔作者:刘先玉

发布时间:2020年12月22日 - 14:50:13

最后更新:2020年12月22日 - 14:50:13

原文链接:https://liuxianyu.cn/article/scroll-fixed.html