css样式元素浮动并置顶， position: sticky 案例演示

一、前言 ❀

吐血啊，终于让我实现了😭，我很想传一个效果动图，😫但是传不了哇，亲们！就看看我的截图吧🤣。
前端框架用的是 uni-app，不过呢，如果你掌握了原理，用什么框架差不多。
如果大家遇到其他问题，欢迎大家评论区向我扔炸弹 — 就是扔问题！
如果有更好的方式解决，或者官方出了好的方式或者属性，拜托🙏评论区告诉我哇！！！！

目标：

• 左滑，最左侧绿色内容，黏贴到左侧侧边栏，白色内容依旧可以滑动；
• 上滑，最上侧绿色内容，黏贴到顶部，下面内容依旧可以滑动；

二、样例展示 ❀

三、上代码 ❀

test.vue 这个代码，其实就是先简单布局下

<template>
    <div id="main-wrapper">
        <div class="table">
            <div class="thead">
                <div class="tr">
                    <div class="th td2" >标</div>
                    <div class="th" >我</div>
                    <div class="th" >想</div>
                    <div class="th" >要</div>
                    <div class="th" >浮</div>
                    <div class="th" >动</div>
                    <div class="th" >固</div>
                    <div class="th" >定</div>
                    <div class="th" >上</div>
                    <div class="th" >部</div>
                </div>
            </div>
            <div class="tbody">
                <div class="tr" v-for=" (item,index) in 15">
                    <div class="th" >左</div>
                    <div class="td" >我</div>
                    <div class="td" >想</div>
                    <div class="td" >要</div>
                    <div class="td" >浮</div>
                    <div class="td" >动</div>
                    <div class="td" >固</div>
                    <div class="td" >定</div>
                    <div class="td" >左</div>
                    <div class="td" >部</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import './style/test.less'
    export default {
        name: "test",
    }
</script>

如果你不知道less文件是什么宝，别急，它就是按照布局的层级，把样式包在里面，方便查找和管理的，按照正常css 去写，完全ok
怎么个🆗法，就是你把里面的层级拿出来就可以了 ，就是你的css
test.less

#main-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2rpx solid blue;

  .table{
    width: 600rpx;
    height: 600rpx;
    border: red solid 1rpx;
    overflow: auto;
    position: relative;

    .thead{
      border: blue solid 1rpx;

      position: sticky; //粘性的关键
      top: 0rpx;    //距离顶部0rpx 的 时候粘帖住不动

      z-index: 999; //层级根据自己情景调整
      .tr{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        .td2{

          position: sticky;  //粘性的关键 不论上下滑 还是左右滑 都不动
          left: 0rpx;
          top: 0rpx;

          background-color: black;
          color: whitesmoke;
        }

        .th{
          width: 100rpx;
          height: 60rpx;
          border: white solid 1rpx;
          background-color: #4cd964;
          flex-shrink:0;  //父元素宽度不够的情况下是自动收缩不？0表示不自动收缩，1表示自动收缩
        }
      }
    }

    .tbody{
      border: deeppink solid 1rpx;
      .tr{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        .th{
          width: 100rpx;
          height: 60rpx;
          border: white solid 1rpx;
          background-color: #4cd964;
          flex-shrink:0;  //父元素宽度不够的情况下是自动收缩不？0表示不自动收缩，1表示自动收缩

          position: sticky;  //粘性的关键
          left: 0rpx;
        }
        .td{
          width: 100rpx;
          height: 60rpx;
          border: white solid 1rpx;
          flex-shrink:0;  //父元素宽度不够的情况下是自动收缩不？0表示不自动收缩，1表示自动收缩
        }
      }
    }
  }
}

四、遇到的问题❀

1.粘性布局不管用，position: sticky;

解答：我当时是给左边（tbody）设置了 overflow: auto;，我把它去掉了就可以了，你可以仔细看看，我的里面只有最外层（table）设置了这个属性。

2. 用了flex布局之后，里面的小div（th）宽度根据外框的div（tr）宽度，变形了，就是th宽度挤小了。

解答：感谢度娘哇！在子元素设置 " flex-shrink:0; " 这个属性，父元素宽度不够的情况下是自动收缩不？0表示不自动收缩，1表示自动收缩

3. 在上下滑动，左右滑动，可能你会发现，该被挡住的在最上层

解答： z-index ，对，就是用这个属性，具体设置在哪里，设置多少，根据你的情景来，年轻人，多试几次，成功就差你那临门一脚

---

五、总结

本来想一步一步，写代码分析，然后发现，总共能没两句话，如果你这样理解不了，我建议，伸出你的双手，打一遍，它就听话了（你大概就能理解了），不要直接抄着打，带逻辑的打【先页面基础布局写好，然后再思考哪里粘性，然后你会遇到问题，根据问题一个一个解决，你就是王者五星】

1.sticky不会触发BFC，
2.z-index无效，
3.当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
4.父元素不能有overflow:hidden或者overflow:auto属性。
5.父元素高度不能低于sticky高度，必须指定top、bottom、left、right4个值之一。

作者：fuheideMayuyu
链接：https://www.jianshu.com/p/e217905e8b87
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

http://caibaojian.com/css3/properties/flex/index.htm