精华内容
下载资源
问答
  • position:sticky

    2020-09-28 15:57:49
    一直以来都忽略了position:sticky这个属性 现在回过头一看,我都错过了些什么。。。。。。 position:sticky简介 设置了position:sticky的元素并不会脱离文档流。 当元素在区域内,元素不受定位的影响(top、left等...

    1、position:sticky简介

    设置了position:sticky的元素并不会脱离文档流。

    • 当元素在区域内,元素不受定位的影响(topleft等设置无效)
    • 当发生滚动,元素就要移出区域时,定位又会变成fixed,根据设置的lefttop的值进行定位,像是fixed效果
      <div class="sticky">
            position:sticky
        </div>
    
    
       .sticky{
          width:300px;
          height: 40px;
          background-color: lightseagreen;
          position:sticky;
          top:0;
       }
    

    在这里插入图片描述

    2、必须注意的点

    设置了position:sticky的元素的效果完全受制于父级元素。

    此外,还遵循以下条件

    1. 父级元素不能有任何overflow:visible以外的overflow设置。即使是scroll或者auto也不行。
    2. 父元素的高度不能低于sticky元素的高度
    3. 同一父容器中的sticky元素,如果定位置相等,则会发生重叠,
    4. sticky元素如果不属于相同父元素,但是他們的父元素正好紧密相连,则会挤开原来的元素,形成依次占位的效果。
    5. 必须制定top,left,bottom,right四个中的至少一个,否则其行为与相对定位相同,并且topbottom同时设置时,top的优先级高;leftright同时设置时,left的优先级高。

    3、简单示例

    3.1 同一父容器中的sticky元素
        <div class="sticky">
            <div>孵化基地发挥地方发挥地方</div>
            <div>孵化基地发挥地方发挥地方</div>
            <div>孵化基地发挥地方发挥地方</div>
        </div>
    
            .sticky {
                width:300px;
                height: 400px;             
            }
            .sticky div{
                position: sticky;
                top:0px;
                height: 60px;
                background-color: lightpink;
                margin-bottom: 20px;
            }
    

    在这里插入图片描述
    可以看到,这些stick元素位于同一个父容器内时,当滚动的一定位置时,后面的会覆盖前面的

    3.2 sticky元素不属于同一父元素,但父元素正好紧密相连

    (为了录制 细节 以及手动操作的 的原因,看着不是很流畅。。。。。实际上很顺滑的。。。)
    在这里插入图片描述

            article h4 {   
                position: sticky;   
                background-color: lightseagreen;
                color: #fff;
                padding: 10px;
                top: 0;       
            }
            article div{
                background-color: lightskyblue;
            }
    
        <article>
            <section>
                <h4>
                    湖人捧奖杯致敬科比鲁UT4923乘客请检测进博会实行核酸检测丰田c_hr青岛已排查密接132人
                </h4>
                <div>
                    http.createServer(function (request, response) {
                    console.log(request.url,request.pathname,'---------')
                    //var pathname=url.parse(request.url).pathname;
                    var pathname=(request.url).slice(1)||"drag.html";
                    console.log(" 请求 "+pathname+"收到了");
                </div>
            </section>
            <section>
                <h4>
                    湖人捧奖杯致敬科比鲁UT4923乘客请检测进博会实行核酸检测丰田c_hr青岛已排查密接132人
                </h4>
                <div>
                    http.createServer(function (request, response) {
                    console.log(request.url,request.pathname,'---------')
                    //var pathname=url.parse(request.url).pathname;
                    var pathname=(request.url).slice(1)||"drag.html";
                    console.log(" 请求 "+pathname+"收到了");
                </div>
            </section>
            <section>
                <h4>
                    湖人捧奖杯致敬科比鲁UT4923乘客请检测进博会实行核酸检测丰田c_hr青岛已排查密接132人
                </h4>
                <div>
                    http.createServer(function (request, response) {
                    console.log(request.url,request.pathname,'---------')
                    //var pathname=url.parse(request.url).pathname;
                    var pathname=(request.url).slice(1)||"drag.html";
                    console.log(" 请求 "+pathname+"收到了");
                </div>
            </section>  
        </article>
    
    展开全文
  • position: sticky

    2020-10-23 10:15:11
    position: sticky定位时,父元素不能设置overflow:hidden

    position: sticky定位时,父元素不能设置overflow:hidden

    展开全文
  • CSS布局:sticky定位 position:sticky 转载 https://www.cnblogs.com/byeyear/p/11999334.html stick定位一如其名:它随“正常”文档流而动,直到规定位置,尔后“粘”在那里;或者,当它发现自己可以跟随“正常”...

    CSS布局:sticky定位 position:sticky

    转载 https://www.cnblogs.com/byeyear/p/11999334.html

    stick定位一如其名:它随“正常”文档流而动,直到规定位置,尔后“粘”在那里;或者,当它发现自己可以跟随“正常”文档流而脱离sticky位置时,就果断离开从而加入文档流。

    示例

    <div  style="height: 200px; overflow:scroll;">
        <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header A</p>
        <p>This is content A</p>
        <p>This is content A</p>
        <p>This is content A</p>
        <p>This is content A</p>
    
        <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header B</p>
        <p>This is content B</p>
        <p>This is content B</p>
        <p>This is content B</p>
        <p>This is content B</p>
        
        <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header C</p>
        <p>This is content C</p>
        <p>This is content C</p>
        <p>This is content C</p>
        <p>This is content C</p>
    
        <p style="background-color:lightgrey; position:sticky; top: 0px;">This is header D</p>
        <p>This is content D</p>
        <p>This is content D</p>
        <p>This is content D</p>
        <p>This is content D</p>
    
    </div>
    

    标题行设置了背景色。如果不设置背景色(背景透明),正常文档流的文字就会和标题行文字重叠在一起显示。

    sticky定位的元素会遮住滚动而来的“正常”的文档流;后面的sticky元素会覆盖前面的sticky元素,就好像一层层的便利贴。

    展开全文
  • css粘性定位positionsticky问题采坑

    万次阅读 多人点赞 2018-07-14 10:16:13
    前言:position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如...
    前言:
    position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置。
    使用
    #sticky-nav {
    position : sticky ;
    top : 100px ;
    }
    设置position:sticky同时给一个(top,bottom,right,left)之一即可
    使用条件:
    1、父元素不能overflow:hidden或者overflow:auto属性。
    2、必须指定topbottomleftright4个值之一,否则只会处于相对定位
    3、父元素的高度不能低于sticky元素的高度
    4、sticky元素仅在其父元素内生效

    例子:
    css代码:
    * {
                margin: 0;
                padding: 0
            }
            
            html body {
                height: 100vh;
                width: 100%
            }
            
            h1 {
                height: 200px;
                position: relative;
                background-color: lightblue;
            }
            
            h1:after {
                content: '';
                position: absolute;
                top: 100px;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: red;
            }
            
            #sticky-nav {
                position: sticky;
                /*position: absolute;*
                left: 0;*/
                top: 100px;
                width: 100%;
                height: 80px;
                background-color: yellowgreen;
            }
            
            .scroll-container {
                height: 600px;
                width: 100%;
                background-color: lightgrey;
            }
    html代码:
    <h1>高200px;距顶部100px</h1>
        <div id="sticky-nav">这是一个tab切换栏,给sticky定位top=100px</div>
        <p class="scroll-container">发生滚动</p>
        <p class="scroll-container" style="background:lightgoldenrodyellow;">发生滚动</p>
    项目中遇到的坑:
    先来看看各大内核对position:sticky的支持情况

    问题描述:
    在一个小程序开发项目中;tabs组件使用了粘性定位,其中有tab栏的切换;tab栏底部是大段列表内容list-container内容的展示;其中展示内容有click事件(或者说是touch事件);ios以及pc浏览器中对点击的测试是正常的;但在安卓手机中!!!!我的天,点击穿透了!!并且,尝试去掉list-container中的item的点击跳转,发现tab切换的点击没有了反应,事件消失了!!!
    设置断点,查看事件流的走向:首先事件捕获-->目标节点tab-->事件冒泡;这个泡居然冒到了container-list中的item。。。简直噩梦
    大致的项目结构:

    html结构:

    <div class="service-wrap">
            <tab>这是tab切换</tab>
            <div class="list-container">
                <!--for循环有很多item-->
                <item></item>
                <item></item>
            </div>
        </div>
    解决办法:
    1.在使用组件库的tab时,外层套一个div,防止点击穿透和不正常的事件流走向
    或者(一个治标不治本的方法,具体看业务场景)
    2.组件库的样式无法改,sticky作为tab组件的行内样式,因为我使用这个tab时是直接在viewpoint的顶部的,这是完全可以用fixed达到效果。我在调用类的外部设置了position:fixed !import;样式最高优先级去覆盖了组件库中的定位样式,就正常了。
    一点想法:
    position:sticky对安卓的兼容简直让人想哭,目前手机端的用户非常多,要做到兼顾,由于安卓系统对sticky粘性定位的惨淡支持;如果业务场景可以用其它定位解决,那就还是不要用sticky吧。。。。留下心酸的泪水。。。。

    ps:有别的解决方法,欢迎大家告知,谢谢。

    文章演示用例来源于博客:https://www.jianshu.com/p/b72f504121f5    博主:这名字真不对

    展开全文
  • 它的表现类似position:relative和position:fixed的合体,当目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会... position:sticky; top: 1...
  • position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的...
  • 前言:position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如...
  • position : sticky

    2012-09-04 23:46:00
    最近很喜欢去青蛙网(其实是CSS-TRICKS*,因为有只可爱的... 看到一篇题目为positionsticky的文章,觉得奇怪,因为position:static|absolute|relative|fixed|inherit,没有这个sticky这个值啊,然而,对于新事物...
  • position: sticky无效

    2021-02-26 01:14:35
    position: sticky是黏性定位,可以实现和fixed定位一样的效果,但是它不会脱离文档流。 坑 使用的过程中发现是按照文档例子写的,position: sticky定位元素也使用了top属性。但是就是不生效,排查一通后发现是最顶层...
  • positionsticky实现

    2020-09-04 08:50:21
    positionsticky实现 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed 的合体,当目标区域在屏幕中可见时,它的行为就像position:relative;当页面滚动超出目标区域时,它的...
  • position:sticky介绍

    2020-09-08 14:48:24
    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大...position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative;
  • CSS position:sticky

    2020-01-21 12:33:58
    position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:...
  • position:sticky新特性

    2020-08-08 14:27:43
    position:sticky早有耳闻也有所了解,后来,Chrome放弃了对其支持,我也就不关心这个声明了,今天偶然发现,卧槽,Chrome什么时候杀了个回马枪,居然又支持了。眼瞅着,各个浏览器纷纷立了山头,要必要关心关心...
  • position:sticky 的生效是有一定的限制的,总结如下: 须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。 并且 top 和 bottom 同时设置时,top 生效的优先级高...
  • 介绍:position:sticky可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px);position:sticky...
  • CSS粘性定位 position:sticky

    千次阅读 2019-02-11 11:55:08
    在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky,它是相对定位(position:relative)和固定定位(position:fixed)的混合。 使用它,我们不再用监听scroll...
  • positionsticky 粘性定位 是结合了position:relative和position:fixed两个功能为一体的组合定位,不再用监听scroll事件,即可实现导航栏滚动绝对定位的效果。 使用该属性有几个必要条件: 1、父级元素不能有任何...
  • 微信小程序----position:sticky:通过position:fixed与position:relative切换。
  • 主要介绍了CSS使用position:sticky 实现粘性布局的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了JS解决position:sticky的兼容性问题的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 想整个滚动条插件,但是里面的元素如果用absolute定位的话,会跟随滚动条滚动,fixed也不好用,偶然查到position: sticky;,确实可以解决这个问题(但兼容很差),先谷歌用着吧 position: sticky; 基于用户的滚动...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,468
精华内容 3,787
关键字:

position:sticky;