纯 CSS 解决H5布局中的吸顶吸底

演示Demo地址（手机端打开）：https://closertb.site/Klotski...
演示Demo源码：https://github.com/closertb/k...
原文：https://github.com/closertb/c...

哪些想啥提啥的产品们

最近作了一个需求，准确说是迭代需求：加了一个头部概览（相似下图），以更好的让用户观察到营销变化，故事的开头就这样悄悄的埋下了伏笔。

之前这个页面只是一个评价列表（可上拉加载），为了数据更易读，列表的头采用了固定布局。然而加了这个概览时，产品没提，我就简单粗暴的将这个列表头换成了相对布局，ok，提测。

但次日，我发现上拉加载数据多了，列表头部被顶上去以后，想再作筛选，就要再把列表上滑才能看到，这个体验很是之差。因而同事就说要不问问产品，要不把概览加概览作成固定。

我第一反应就是，恐怕提了以后，产品会让我只把筛选列表头部作成固定,注意那个只。

而后就有了下面的对话：

果真怕什么，来什么，毕竟是很常规的操做。但就像同事说的，本身问的需求，含着泪也要接下。

局部吸顶

如下代码是页面的dom结构

<div id="demo" className={style.demo}>
  <h3 id="title" className="title">这是一个概览头部</h3>
  <div id="content" className="content">
    <div className="filter-bar">
      <h3>这是列表头部</h3>
      <h3>可筛选</h3>
      <h3>下面是滚动列表</h3>
    </div>
    <ul className="list">
      {arr.map(({ key, label }) => <li key={key}>{label}</li>)}
    </ul>
  </div>
</div>

JS 实现

由于页面自己就有scroll事件监听，因此第一个念头是用JS完成，但当时已经下班，又是周五，感受5分钟内搞不定，因此我就跑了。

如今来尝试用JS实现，先理一下思路：

• 监听页面的滚动，当ul元素顶部距离页面顶部大于title 高度时，添加一个css类使筛选头部吸顶；
• 当ul元素距离顶部小于等于title 高度时，删除添加的类，取消筛选头部吸顶

JS 代码

useEffect(() => {
  const demo = document.querySelector('#demo');
  const content = document.querySelector('#content');
  const titleHeight = document.querySelector('#title').clientHeight;
  let fixed = false;
  demo.addEventListener('scroll', (e) => {
    // 添加吸顶
    if (!fixed && e.target.scrollTop >= titleHeight) {
      fixed = true;
      content.classList.add('with-fixed');
    }
    // 取消吸顶
    if (fixed && e.target.scrollTop < titleHeight - 5) {
      content.classList.remove('with-fixed');
      fixed = false;
    }
  });
}, []);

看起也不难，但其实离代码上线，还有很大优化的空间，后面会分析补充。

CSS 实现

JS 看似很简单，但就像那句热门句子：这突如其来的噩耗，让本不富裕的家庭雪上加霜。在这种有下拉加载的页面，咱们原本就在监听里面作了不少逻辑处理，因此能用CSS实现的，就尽可能不要再去麻烦JS了。

首先理一下思路，深挖产品的需求：

• 保持筛选头在可视范围以内(吸顶), 保证可筛选；
• 当列表数据多时，尽量多展现列表，即概览头部就不必看到了；
• 列表是上拉加载的；

当理清上面思路时，咱们发现，其实就是当列表很长时，隐藏概览头部，简单用伪代码表示就是（vh是视口单位 ，100vh表明整个屏幕可视高度）：

if (titleHeight + filterBarHeight + listHeight > 100vh) {
     title.hide();
   }

那又怎样实现概览头部隐藏，而筛选头和列表又正好出于视口呢？

filterBarHeight + listHeight = 100vh

当用户往上划，只须要内容（筛选头和列表）正好是一个视口高度（100vh）时，概览头就刚好被隐藏，而筛选头又正好吸顶，用CSS实现就是相似这样的：

// 不是完整代码，详情请看demo：
.demo {
 :global {
   .title {
     height: 15vh;
     line-height: 15vh;
     text-align: center;
     border-bottom: 1PX solid #eee;
     background-color: #fff;
   }
   .filter-bar {
     height: 15vw;
     background-color: #888;
     display: flex;
     align-items: center;
   }
   .list {
     max-height: calc(100vh - 15vw);; // 这里的设置很重要
     overflow: scroll;
     background-color: rgba(127, 255, 212, .8);
   }

### 对比

是否是感受CSS很简单，稍微设置一下即搞定，只是要想到内容高度正好是100vh须要一点经（yun）验（qi）。其实不光简便，对比JS至少还有三个优势：

• JS 若是只是上面那样，直接将筛选头的定位改为固定定位，眼力好的人，实际上是能感受到列表有跳变的一瞬间，就是列表会忽然上移filterBar高度，来填补筛选头离开正常文档流；（解决方案就是在筛选头外多套一层dom，并给一个固定高度，这样筛选头脱离正常文档流，但高度依旧还在）；
• 当用户下拉加载不少数据时，还想看到概览头部，他就得费劲的往上划，直到移除吸顶筛选头的类；而CSS实现就不存在，他想看到对比数据时，只须要按住筛选头，往下一拉，就直接看到筛选头了(能够在筛选头部增长js来实现)；
• 当用JS来操做Dom元素重排时，这每一年面试官说的那些重绘重拍我就很少说了，这消耗的性能确定高于CSS实现；

固然缺点也是存在的：

• 兼容性问题，倒不是说vh的兼容性，而是在ios手机上，这方案有bug。因为safari的头部和底部滑动时可见性会改变，因此当Bar可见时，实际的100vh高于屏幕可见高度，就会致使吸顶头部被遮挡。到目前为止，虽然网上有不少说height: -webkit-fill-available；，但针对这种场景是无效的；

通过上面分析，100vh在IOS safari上的致命问题，会让这种纯CSS的方案褪色。但PC页面，或者你和我同样，要编写的页面是运行在APP中（即没有bar存在），那这种方案就是可行的。全部的方案都要具体场景，具体分析，没有谁出生就是完美。

若是对重绘重排有兴趣，建议观看Chrome的官方博文: 浏览器四部曲

弹性吸底

说完局部弹性吸顶，再说一个常见的，选择性吸底：在页面内容不足100vh时，咱们但愿Footer是吸底的，当页面内容大于100vh时，Footer处于正常文档流，让内容可视区域更大，而又不会由于内容太少影响美观，见图：

像第一张图那样不作定位的仍是大有人在，由于他们坚信本身网站的内容不会出现不够的时候，但之前更常见作法是底部固定定位。

弹性吸底利用min-height 加绝对定位，其实现很简单。核心代码不超过5行css:

body{
  position: relative;
  min-height: 100vh;
}

footer {
  width: 100%;
  position: absolute;
  bottom: 0;
}

原理就是内容区域最低高度为一个屏幕，而后底部相对屏幕进行绝对定位；当内容变多时，高度大于100vh，因为是依赖bottom: 0;，因此会一直吸底，其巧妙之处就在于此。

针对于这个场景，height: -webkit-fill-available 就是有效的。

更多关于-webkit-fill-available, 参见[https://allthingssmitty.com/2...]；

总结

vh 确实是个好东西，能够解决移动端的适配问题。我我的以为做为一个合格的前端，CSS 仍然是必备技能，不要对JS产生太多的依赖，不是不能够，而是好钢要用在刀刃上。