纯CSS解决H5布局中的吸顶吸底的实现步骤

哪些想啥提啥的产品们

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

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

但第二天，我发现上拉加载数据多了，列表头部被顶上去之后，想再做筛选，就要再把列表上滑才能看到，这个体验非常之差。于是同事就说要不问问产品，要不把概览加概览做成固定。

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

然后就有了下面的对话：

果然怕什么，来什么。但就像同事说的，自己问的需求，含着泪也要接下。

后面经评论提点，又加入了sticky的方案，确实是最优解。

局部吸顶

以下代码是页面的 dom 结构

  
这是一个概览头部
  

    

      
这是列表头部
      
可筛选
      
下面是滚动列表
    
    

      {arr.map(({ key, label }) => 
{label}
)}
    
  

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 Viewport实现

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 Sticky

在css中的定位( position )属性值中有个不常用的： sticky ；

MDN官方文档摘录 :

元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级祖先，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

这里我们在沿用JS的方案上进行更改，只需要将filter-bar 的定位属性改为粘性定位，就可以去除对 JS 的依赖；

.demo {
  max-height: 100%;
  overflow: scroll;
  .filter-bar {
    position: sticky;
    top: 0;
  }
}

demo类作用于最外层dom(

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

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