一篇带给你H5吸顶方案

一. 什么是吸顶?

吸顶效果是web开发中一种常见的交互方式，常见的应用场景有导航、搜索框等等。能够做流量的横向分发，瞩目的吸顶效果和横滑切tab的手势，能够让用户快速发现更多商品。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了灌南免费建站欢迎大家使用！

市场上现有H5导航栏吸顶效果展示

1.淘宝聚划算吸顶演示：

2.淘宝百亿补贴吸顶演示：

二. 常见的tabbar吸顶方案

1. 基于position粘性定位的吸顶方案
2. 基于JS监听scroll事件的吸顶方案

三. 方案的原理与对比

1. position粘性方案的实现与详解

1.1. 知识详解

position使我们经常使用的CSS属性，能够在布局和解决一些特定问题时候带来很好的解决方案，例如，卡片的各种icon图标。position粘性定位也是实现吸顶的方案之一，先看看position具有哪些属性值及相关的含义：

MDN传送门

关于sticky属性，顾名思义，单词sticky的中文意思是“粘性的”，其效果是position:relative和position:fixed的结合。当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。这个属性曾经被chrome放弃过，不过后来又得到了支持

 
 
 
 

  
  
  
  
 
  
  
  
  
nav{ 
  
  
  
  
    position: -webkit-sticky; 
  
  
  
  
    position: sticky; 
  
  
  
  
    top:  
 
 
 
 

1.2 兼容性

如上图所示，position的sticky已经被各类游览器支持，并且得到了比较好的支持，除safari还需-webkit-前缀支持外。

demo实现：

 
 
 
 

  
  
  
  
*{ 
  
  
  
  
     padding:0; 
  
  
  
  
     margin:0; 
  
  
  
  
 } 
  
  
  
  
 .container{ 
  
  
  
  
     width:100%; 
  
  
  
  
     background:rgba(0,0,0,.5); 
  
  
  
  
 } 
  
  
  
  
 .nav{ 
  
  
  
  
     width:100%; 
  
  
  
  
     height:50px; 
  
  
  
  
     text-align: center; 
  
  
  
  
     line-height: 50px; 
  
  
  
  
     background: black; 
  
  
  
  
     color:white; 
  
  
  
  
     position: sticky; 
  
  
  
  
     top:0; 
  
  
  
  
 } 
  
  
  
  
 .body{ 
  
  
  
  
     width:100%; 
  
  
  
  
     height:10000px; 
  
  
  
  
 }