精华内容
下载资源
问答
  • 详解CSS粘性定位 sticky

    2020-12-11 17:45:34
    简单来说,在滑动过程中,某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top:100px); position:sticky这时的效果相当于fixed定位,固定到适当位置 讲 sticky 定位之前,我先说一下position 的其他...
  • 粘性定位

    千次阅读 2019-12-03 16:43:44
    position: sticky 粘性定位 利用flex(伪)瀑布流展示图片 css计算属性calc() 雪碧图截取icon 粘性定位 之前对定位没有一个笼统的学习,大多数情况下用relative,absolute,fi...

    好久没发博客啦这里萌芽~ 今天做了个小练习前来总结一下!成品图不是特别好看凑合一下,老规矩代码会放在最后。

    练习总结笔记 

    1. position: sticky 粘性定位

    2. 利用flex(伪)瀑布流展示图片

    3. css计算属性 calc()

    4. 雪碧图截取icon

    粘性定位

    之前对定位没有一个笼统的学习,大多数情况下用relative,absolute,fixed就够用了,直到今天看了阮一峰老师的总结发现了个好玩的【position: sticky】粘性布局可以说是relative + fixed的结合体,在定义这个属性后必须给它定义他的位置(topbottomleftright至少给一个),否则将会无法生效。它会随着滚动条的滚动然后贴在给他固定的位置,画个图大概是这种感觉。
    当滚动条一直往下滚div2到达了top0的时候就会变成fixed死死的固定在最上面!
    在一些特殊的场景下非常的好用。感谢阮一峰老师定位详解笔记!普及到了新的知识点!
    CSS 定位详解:http://www.ruanyifeng.com/blog/2019/11/css-position.html

    flex(伪)瀑布流展示图片

    为什么要说是(伪)瀑布流呢?因为这种方式在数据量比较大的时候并不推荐使用!会出问题的,在数据量固定且数量少的时候可以这么写着玩玩。大概逻辑就是开始flex布局的竖轴模式然后把内容分成三份展示,这里萌芽其实也是有参考的,感兴趣的小伙伴可以去看一下这位大佬的博客。
    3种方式实现瀑布流布局:https://blog.csdn.net/weixin_44135121/article/details/98629830#flex__208

    计算属性 calc()

    css自身也是有计算属性的!因为萌芽之前不知道结果走了不少弯路都是用js获取高度然后去跟屏幕高度减来减去求的自己想要的高度,但是实际上完全不需要那么麻烦css提供的calc()计算属性就能解决计算宽高度的大难题!calc() 函数用于动态计算长度值。

    width: calc(100% - 100px);
    calc()函数支持 "+", "-", "*", "/" 运算;

    雪碧图截取icon

    之前都是用iconfont没用过雪碧图,这次萌芽通俗易懂的来讲讲什么是雪碧图:
    雪碧图就是很多个icon合在一起的图片,以前一个个小图标每次加载页面的时候有多少个图标就要请求多少次,毫无疑问的说这样造成了很多请求次数很麻烦不说性能也不好,后来有人想到将这些icon合并一张图上这样每次进入页面只要请求一次的话就够了!

    
        .item1,
        .item2 {
            background: url('你的图片')no-repeat;
            background-size: 100%;
        }
    
        .item1 {
            background-position: -10px -10px;
        }
    
        .item2 {
            background-position: -10px -20px;
        }

    核心代码就是通过background-position改变图片展示的位置,第一个参数是 x 第二个参数是 y,根据移动位置调整图片的展示区域。不过还是推荐大家使用iconfont~

    代码环节

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS定位练习</title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
    
        img {
            width: 100%;
        }
    
        .container {
            min-height: 100vh;
            width: 100vw;
            background-color: #fff;
        }
    
        .container .advertising {
            overflow-y: scroll;
            overflow-x: hidden;
            height: 150px;
        }
    
        .container .advertising::before {
            content: '萌芽笔记';
            font-family: PingFang SC;
            position: absolute;
            margin: 10px 20px;
            color: #6f6464;
            font-size: 28px;
            z-index: 1;
        }
    
        .container .advertising>img {
            position: sticky;
            top: 0;
            width: 100%;
        }
    
        /* 外部容器定高不定宽,内部盒子定宽不定高 */
        .container .title {
            display: flex;
            position: sticky;
            top: 0;
            justify-content: space-between;
            align-items: center;
            padding: 0 40px;
            height: 50px;
            background-color: white;
        }
    
        .container .title>.title-user,
        .container .title>.title-menu,
        .container .title>.title-card {
            height: 30px;
            width: 30px;
            background: url('https://hbimg.huabanimg.com/8b03c44fc8b30c0c928a43aae7a1cedc8f05674ac872-r5ANvA_fw658')no-repeat;
            background-size: 1100%;
        }
    
        .container .title>.title-user {
            border-radius: 50%;
            overflow: hidden;
        }
    
        .container .title>.title-menu {
            background-position: -240px -64px;
        }
    
        .container .title>.title-card {
            position: relative;
            background-position: -239px -125px;
        }
    
        .container .title>.title-card.news::after {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            height: 10px;
            width: 10px;
            border: 2px solid #D6F4F7;
            border-radius: 50%;
            background-color: #5ECAD6;
        }
    
        /* 卡牌开始 */
        .container .card {
            display: flex;
            flex-flow: column wrap;
            height: calc(150vh - 50px);
        }
    
        .container .card>.card-cont {
            margin: 10px;
            width: calc(100%/3 - 20px);
            background-color: rgb(186, 234, 214);
        }
    
        .container .card>.card-cont img {
            width: 100%;
        }
    </style>
    
    <body>
        <!-- 外部容器开始 -->
        <div class="container">
            <!-- 广告位开始 -->
            <div class="advertising" id="switch"></div>
            <!-- 广告位结束 -->
    
            <!-- 顶部导航开始 -->
            <div class="title">
                <!-- 头像 -->
                <div class="title-user">
                    <img
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575359242186&di=dbb05808d024eaf639a1b445cf97c1e4&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F20%2F20160920164705_VGjhC.jpeg">
                </div>
                <div class="title-menu"></div>
                <div class="title-card news"></div>
            </div>
            <!-- 顶部导航结束 -->
    
            <!-- 卡牌面板开始 -->
            <div class="card" id="list"></div>
            <!-- 卡牌面板结束 -->
        </div>
        <!-- 外部容器结束 -->
    
        <script>
            /**
             * 思路:
             * 重复图片太烦了所以萌芽打算弄个循环
             */
            window.onload = function () {
                //用到的图片
                const switchImg = document.getElementById('switch');
                const switchCard = document.getElementById('list');
                const img = [
                    'https://hbimg.huabanimg.com/b430d861b5f50e2925be793cb486ed6a4fba6c7b8450e-gMhUTr_fw658',
                    'https://hbimg.huabanimg.com/4875eea2904892e3780d8d5f8bbec57f8e8b7b4e98848-VcWqqC_fw658',
                    'https://hbimg.huabanimg.com/dd29c40d8c37041bb18ce283b59169ad1e90d42391d3a-b076Fl_fw658',
                    'https://hbimg.huabanimg.com/d811797bc32597503eb339a8862215db54b2e8839772f-3iLEyx_fw658',
                    'https://hbimg.huabanimg.com/315db0808980de9de7f44d820730c8da1a94d9f8888eb-tTWrZz_fw658'
                ]
    
                addSwitchImg()
                addSwitchCard()
    
                function addSwitchCard() {
                    let html = '';
                    for (let index = 0; index < 15; index++) {
                        html += `<div class="card-cont">
                            <img src="${img[Math.round(Math.random()*4)]}">
                        </div>`;
                    }
                    switchCard.innerHTML = html
                }
    
                //添加顶部图片
                function addSwitchImg() {
                    let html = ''
                    img.forEach(item => html += `<img src="${item}">`)
                    switchImg.innerHTML = html;
                }
            }
        </script>
    </body>
    
    </html>

     

    展开全文
  • 简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置。 使用: #sticky-nav { position: sticky; top: ...
  • demo 测试目录 包含联系 新属性测试 新效果调试
  • CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的...
  • position:sticky 开启粘性定位 个人理解: 粘性定位:在正常情况下,相当于相对定位,并不会脱离正常文档流,占有位置 一但浏览器滚动轴y轴运动,粘性定位便如同固定定位一样,脱离文档流,固定在浏览器某一位置...

    position:sticky 开启粘性定位

    个人理解:

    粘性定位:在正常情况下,相当于相对定位,并不会脱离正常文档流,占有位置

    一但浏览器滚动轴y轴运动,粘性定位便如同固定定位一样,脱离文档流,固定在浏览器某一位置

    后跟  top:固定在具体什么位置

             left:固定在具体什么位置

    展开全文
  • 粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如:.sticky...

    粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如:

    .sticky-header {
      position: sticky;
      top: 10px; 
    }
    

    在 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到视口回滚到阈值以下。

    粘性定位常作用在导航和概览信息(标题,表头,操作栏,底部评论等)上。这样,用户在浏览详细信息时,也能看到信息的概览和做一些操作,给用户带来便捷的使用体验。

    粘性定位看着很简单,但也很容易出现不生效的情况。为帮助大家彻底理解粘性定位,本文会从 3 个方面来介绍:

    • 粘性定位的原理。

    • 不生效的情况。

    • 具体的例子。

    原理

    为便于理解粘性定位,这里引入四个元素:视口元素,容器元素,粘性约束元素 和 sticky 元素。它们的关系如下:


    视口元素:显示内容的区域。会设置宽,高。一般会设置 overflow:hidden
    容器元素:离 sticky 元素最近的能滚动的祖先元素。
    粘性约束元素:粘性定位的父元素。有时,也会出现粘性约束元素就是容器元素的情况。
    sticky 元素:设置了 position: sticky; 的元素。

    滚动时,sticky 元素设置的 left, right, top, bottom 的值相对的是容器元素。当粘性约束元素滚出视口时,sticky 元素也会滚出视口。

    不生效的情况

    情况1: 未指定 top, right, top 和 bottom 中的任何一个值

    此时,设置 position: sticky 相当于设置 position: relative

    要生效,要指定 top, right, top 或 bottom 中的任何一个值。

    情况2: 垂直滚动时,粘性约束元素高度小于等于 sticky 元素高度

    不生效的原因:当粘性约束元素滚出视口时,sticky 元素也会滚出视口。粘性约束元素比 sticky 元素还小,sticky 元素没有显示固定定位状态的机会。

    同样的,水平滚动时,粘性约束元素宽度小于等于 sticky 元素宽度时,也不会生效。

    情况3: 粘性约束元素和容器元素之间存在 overflow: hidden 的元素

    该情况的示例代码:

    <div class="viewport">
      <div class="container"> <!-- 容器元素 -->
        <div style="overflow: hidden">
          <div> <!-- 粘性约束元素 -->
            <div class="stick-elem">...</div>  <!-- sticky 元素 -->
            ...
          </div>
        </div>
      </div>
    </div>
    

    要生效,要把 overflow: hidden 的元素移除。

    具体的例子

    例子1: 页面滚动

    这个例子,我们来实现页面滚动到文章内容时,文章标题吸顶的效果。

    HTML 结构如下:

    <div class="header">网站头部</div>
    <!-- 粘性约束元素 -->
    <div class="article">
      <!-- sticky 元素 -->
      <h2 class="title">彻底理解粘性定位 - position: sticky</h2>
      <div class="content">...</div>
    </div>
    <div class="footer">网站底部</div>
    

    在这个例子中,视口元素和容器元素都是 body。sticky 元素是 .title,因此只要在 sticky 元素上设置如下样式即可:

    .title {
      position: sticky;
      top: 0;
      background-color: #fff;
    }
    

    例子2: 文章列表

    这个例子,我们来实现一块区域下有多篇文章,区域滚动到文章内容时,对应的标题和操作按钮吸顶的效果。

    HTML 结构如下:

    <!-- 视口元素 -->
    <div class="viewport">
      <!-- 容器元素 -->
      <div class="container">
        <!-- 文章:粘性约束元素 -->
        <div class="article">
          <div class="sticky-header">
            <h2>彻底理解粘性定位 - position: sticky</h2>
            <div class="options">
              <button>转发</button>
              <button>点赞</button>
            </div>
          </div>
          <div class="article-content">...</div>
      </div>
      <!-- 文章 -->
      <div class="article">...</div>
      <div class="article">...</div>
    </div>
    

    在这个例子中,视口元素是 .viewport,容器元素是 .container。sticky 元素是 .sticky-header。核心样式如下:

    /* 视口元素 */
    .viewport {
      width: 50%;
      overflow: hidden;
      height: 200px;
    }
    /* 容器元素 */
    .container {
      overflow: auto;
      height: 100%;
    }
    /* 粘性约束元素 */
    .article {
      margin-bottom: 10px;
    }
    /* sticky 元素 */
    .sticky-header {
      position: sticky;
      top: 0;
      padding: 5px 0;
      background-color:#fff;
    }
    

    例子3: 甘特图

    最后,我们来做个复杂点的例子:甘特图。如下图所示:

    需要实现:

    • 左侧事项菜单总在最左侧。

    • 菜单的头部和时间轴吸顶。

    • 时间轴的年总在月的最左边。

    实现代码有点多,就不在这里贴了。获取完整源码,关注公众号: 前端GOGOGO,回复: 粘性定位。

    最后

    粘性定位的浏览器兼容性也很好:95.76% 的浏览器支持[1]。大家可以放心的使用~

    推荐阅读:

    • position:sticky 粘性定位的几种巧妙应用[2]

    参考资料

    [1]

    95.76% 的浏览器支持: https://caniuse.com/css-sticky

    [2]

    position:sticky 粘性定位的几种巧妙应用: https://segmentfault.com/a/1190000039858711

    最后

    如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:

    1. 点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)

    2. 欢迎加我微信「 sherlocked_93 」拉你进技术群,长期交流学习...

    3. 关注公众号「前端下午茶」,持续为你推送精选好文,也可以加我为好友,随时聊骚。

    点个在看支持我吧,转发就更好了

    展开全文
  • CSS 定位 定位 1.1 为什么需要定位 提问: 以下情况使用标准流或者浮动能实现吗? 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子. 提问: 以下情况使用标准流或者浮动能实现吗? 当我们滚动窗口的...

    CSS 定位

    1. 定位

    1.1 为什么需要定位

    提问: 以下情况使用标准流或者浮动能实现吗?

    1. 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.

    在这里插入图片描述

    提问: 以下情况使用标准流或者浮动能实现吗?

    1. 当我们滚动窗口的时候,盒子是固定屏幕某个位置的。

    在这里插入图片描述

    以上效果,标准流或浮动都无法快速实现,此时需要定位来实现

    所以:

    1. 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。
    2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子

    1.2 定位组成

    定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。

    定位 = 定位模式 + 边偏移 。

    定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

    1.2.1 定位模式

    定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:
    在这里插入图片描述

    1.2.2 边偏移

    边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

    在这里插入图片描述

    1.3 静态定位 static(了解)

    静态定位是元素的默认定位方式,无定位的意思。

    语法:
    在这里插入图片描述

    • 静态定位按照标准流特性摆放位置,它没有边偏移
    • 静态定位在布局时很少用到

    1.4 相对定位 relative(重要)

    相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)。

    语法

    在这里插入图片描述

    相对定位的特点:(务必记住)

    1. 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
    2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。
      因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

    1.5 绝对定位 absolute(重要)

    绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。

    语法:
    在这里插入图片描述

    绝对定位的特点:(务必记住)

    1. 如果没有祖先元素或者祖先元素没有定位则以浏览器为准定位(Document 文档)
    2. 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
    3. 绝对定位不再占有原先的位置。(脱标)
      所以绝对定位是脱离标准流的

    1.5.1 绝对定位的盒子居中

    加了绝对定位的盒子不能通过 margin:0 auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中。

    ① left: 50%;:让盒子的左侧移动到父级元素的水平中心位置。
    ② margin-left: -100px;:让盒子向左移动自身宽度的一半。

    1.6 子绝父相的由来

    弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。

    这个“子绝父相”太重要了,是我们学习定位的口诀,是定位中最常用的一种方式这句话的意思是:子级是绝对定位的话,父级要用相对定位。

    ① 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。

    ② 父盒子需要加定位限制子盒子在父盒子内显示。

    ③ 父盒子布局时,需要占有位置,因此父亲只能是相对定位。

    这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。

    总结: 因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位

    当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到

    1.7 固定定位 fixed (重要)

    固定定位元素固定于浏览器可视区的位置。主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。

    语法:
    在这里插入图片描述

    固定定位的特点:(务必记住)

    1. 以浏览器的可视窗口为参照点移动元素。
    • 跟父元素没有任何关系
    • 不随滚动条滚动。
    1. 固定定位不占有原先的位置。

    固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。

    固定定位小技巧: 固定在版心右侧位置。

    小算法:

    1. 让固定定位的盒子 left: 50%. 走到浏览器可视区(也可以看做版心) 的一半位置。
    2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置
      就可以让固定定位的盒子贴着版心右侧对齐了。

    1.8 粘性定位 sticky(了解)

    粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

    语法:
    在这里插入图片描述

    粘性定位的特点:

    1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
    2. 粘性定位占有原先的位置(相对定位特点)
    3. 必须添加 top 、left、right、bottom 其中一个才有效
      跟页面滚动搭配使用。 兼容性较差,IE 不支持。

    1.9 定位的总结

    在这里插入图片描述

    1.10 定位叠放次序 z-index

    在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)

    语法:

    • 数值可以是正整数、负整数或 0, 默认是 auto,数值越大,盒子越靠上
    • 如果属性值相同,则按照书写顺序,后来居上
    • 数字后面不能加单位
    • 只有定位的盒子才有 z-index 属性

    1.11 定位的拓展

    定位特殊特性
    绝对定位和固定定位也和浮动类似。

    • 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
    • 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。

    脱标的盒子不会触发外边距塌陷

    浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题

    绝对定位(固定定位)会完全压住盒子
    浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)

    但是绝对定位(固定定位) 会压住下面标准流所有的内容。

    浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

    在这里插入图片描述

    展开全文
  • 粘性定位的使用

    2021-07-17 15:40:36
    position:sticky; 拉动滚动条当盒子到了设定的偏移量时就会像固定定位一样。...我是粘性定位</div> </div> </body> <style> body { height: 2000px; } .nav { width: 100%
  • CSS定位 定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子。 定位的组成 定位是将盒子定位在某一位置。按照定位的方式移动盒子。 定位=定位模式+边偏移。 定位模式...
  • vue之粘性定位组件

    2021-02-08 11:15:34
    目录vue之粘性定位组件sticky/Sticky.vuesticky/index.jsmain.js使用组件 vue之粘性定位组件 sticky/Sticky.vue <template> <div :style="{height:height+'px',zIndex:zIndex}"> <div :class=...
  • 利用JS实现粘性定位

    2021-10-31 16:20:05
    获取参数 需要三个参数,既banner部分距离页面最高处的值(用于决对定位->固定定位)、橙色小方块距离页面最高处的值、以及二者之差(用于固定定位->绝对定位) //一定要写在函数外边,不然会不准 let banneroffset ...
  • 了解粘性定位,特点,使用案例,为什么不起作用,以及解决方法
  • vue中粘性定位插件。

    2019-10-15 17:33:23
    `${boxTop}px` : '125px'//开启粘性定位时,距离头部的高度,我的是125,根据你们的需要自己修改。 // contentStyle.left = this.left === 'unset' ? `${boxLeft}px` : this.left } }, scrollHandler() { ...
  • 粘性定位(HTML、CSS)

    2021-08-14 10:35:08
    粘性定位(HTML、CSS) <!DOCTYPE html> <html lang="en"> <...meta name="viewport" content="width=device-width, initial-scale=1.0">...粘性定位</title> <style> body {
  • 补上一些学习笔记,内容不多也算是做一个...文章目录往期主篇章固定定位(fixed)相对于浏览器固定某个元素不随着滚动条的滚动而滚动验证固定定位是脱离标准流的(脱标)粘性定位(sticky) 固定定位(fixed) 相对于.
  • 定位 = 定位模式 + 边偏移 1.模式 position : static (静态) | relative (相对) | absolute (绝对) | fixed (固定) 2.边偏移 top | bottom | left | right 1.静态定位static 默认定位方式,无定位...
  • 一、固定定位 position:fixed; 【固定定位】 a: 参照物:浏览器窗口。 b: 不占据空间,脱离布局流。 (注:如果块状元素没有设置宽度的时候,添加position:absolute 或position:fixed会出现宽度被内容撑开) 让一个...
  • 一文搞懂css定位方式,详细详细详细
  • html5 粘性定位

    2020-11-07 22:53:59
    html5 粘性定位 html5 粘性定位(ie浏览器不兼容)可以理解为固定定位和绝对定位的结合体 相当于固定导航栏,这样做虽然简单,但是ie浏览器不兼容所以现在网站上看到的都是用js编码的固定导航 js实现固定导航栏 ...
  • 粘性定位可以被认为是相对定位和固定定位的混合(即元素子再跨越特定阈值前为相对定位,之后为固定定位)例如: .div{ position: sticky; top: 10px; } 在 视口滚动到元素 top 距离小于 10px 之前,元素为相对...
  • 首先用到 react - sticky 这个插件 先下载 npm i -S react-sticky 第二步在我们想要用到的地方引入 ...这是效果图 ,往扒拉的时候 这个导航栏一直在上面 ...因为我用了antd组件 所以是写了renderTaBar = ( props , ...
  • 粘性定位 当页面滚动到一定程度的时候,让某元素固定在指定位置 position:sticky; 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
  • js实现sticky粘性定位

    2021-10-20 11:50:13
    var dom = document.querySelector('.count_money'), domTop = dom.offsetTop; window.addEventListener('scroll',scrollFunc) ... // 定位底部 if(window.pageYOffset < domTop - window.innerHeight){ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,711
精华内容 4,284
关键字:

粘性定位