Html5导航栏吸顶方案原理与对比实现

市场上享有H5导航栏吸顶结果展示

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

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

二. 常见的tabbar吸顶方案

基于position粘性定位的吸顶方案

基于JS监听scroll变乱的吸顶方案

三. 方案的道理与比拟

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

1.1. 常识详解

position使我们常常行使的CSS属性，可以或许在机关息争决一些特定题目时辰带来很好的办理方案，譬喻，卡片的各类icon和标。position粘性定位也是实现吸顶的方案之一，先看看position具有哪些属性值及相干的寄义：

取值 相干表明
static   该要害字指定元素行使正常的机关举动，即元素在文档通例流中当前的机关位置。此时 top, right, bottom, left 和 z-index 属性无效。  
relative   该要害字下，元素先安排在未添加定位时的位置，再在不改变页面机关的条件下调解元素位置（因此会在此元素未添加定位时地址位置留下空缺）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。  
absolute   元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对付最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以配置外边距（margins），且不会与其他边距归并。  
fixed   元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对付屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕转动时不会改变。打印时，元素会呈此刻的每页的牢靠位置。fixed 属性会建设新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。  
sticky   元素按照正常文档流举办定位，然后相对它的最近转动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包罗table-related元素，基于top, right, bottom, 和 left的值举办偏移。偏移值不会影响任何其他元素的位置。  

MDN传送门

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

<!--示例用法--> nav{ position: -webkit-sticky; position: sticky; top: 0; }

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; }

<div class="container"> <div style="width:100%;height:100px;"></div> <div class="nav">position sticky 粘性定位</div> <div class="body"></div> </div>

1.3. 也许会踩得坑

 行使position:sticky同时，必需同时行使(top、left、right、bottom)中之一，否者无效

父元素不能overflow:hidden可能overflow:auto属性，否者无效

父元素的高度不能小于sticky元素的高度，否者无效

sticky元素仅在其父元素内见效

2. JS监听scroll变乱的吸顶方案

常识详解 整体思绪是通过js对转动变乱的监听，当转动到顶部时(距顶部的间隔为0时),动态的将元素的position属性变动为fixed，举办牢靠定位到达吸顶的结果。 判定间隔顶部的间隔较量通例的是行使offsetTop，但offsetTop是相对定位父级的偏移量，倘若必要转动吸顶的元素呈现定位父级元素，那么 offsetTop 获取的就不是元素间隔页面顶部的间隔。这里我们思量行使 getBoundingClientRect() 获取页面中某个元素相对赏识器视窗上下阁下的间隔。 MDN传送门

function compute(){ let ele = document.getElementById('nav'); if(ele.getBoundingClientRect().top === 1){ ele.style.position = "sticky"; ele.style.top = 0; } } window.addEventListener('scroll', compute);

到此这篇关于Html5导航栏吸顶方案道理与比拟实现的文章就先容到这了,更多相干Html5 导航栏吸顶内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!