粘性定位（sticky）

最新推荐文章于 2023-02-27 16:28:00 发布

取名好樊

最新推荐文章于 2023-02-27 16:28:00 发布

阅读量320

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_31290307/article/details/114677478

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

粘性定位（sticky）

前几天做项目遇到一个需要滚动到特定位置固定的情况。当时采用的方法是监听滚动，获取滚动位置，动态复制top
的方式。
当时的写法：

mounted() {
   window.addEventListener('scroll', this.getScroll, true);
   this.offsetTop = document.getElementById('customTabs').offsetTop;
},
getScroll(){
   const scrollTop = document.getElementById('home').scrollTop;
   if (scrollTop < this.offsetTop) {
       this.scrollTop = scrollTop;
   }
},

然后今天看博客的时候无意看到sticky 粘性定位。可以更简单的实现。
eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box {
    position: relative;
    margin: 0 auto;
    border: 2px solid #1790FF;
    padding-top: 40px;
    width: 400px;
    height: 1500px;
    background: #f5f5f5;
}
.head{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 40px;
    color: #fff;
    background: #1790FF;
}
</style>
</head>

<body>

<div class="box">
    <div class="head">固定导航</div>
    内容
</div>

</body>
</html>

最后附上sticky的兼容性：
在这里插入图片描述

取名好樊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
粘性定位（sticky）

粘性定位（sticky）前几天做项目遇到一个需要滚动到特定位置固定的情况。当时采用的方法是监听滚动，获取滚动位置，动态复制top的方式。当时的写法：mounted() { window.addEventListener('scroll', this.getScroll, true); this.offsetTop = document.getElementById('customTabs').offsetTop;},getScroll(){ const scrollTop =
复制链接

扫一扫