导航栏吸顶效果,js吸顶导航栏
一. 什么是吸顶？
顶吸效果是web开发中常见的交互方式，常见的应用场景有导航、搜索框等。可以做到流量的横向分布，醒目的天花板效果和横向切割tab的手势，使用户快速找到更多的产品。
市场上享有H5导航栏吸顶效果展示
1.淘宝聚划算吊顶演示：
2.淘宝十亿补贴上限演示：
二. 常见的tabbar吸顶方案
基于位置粘性定位的吸顶方案：基于JS监控滚动事件的吸顶方案三. 方案的原理与对比
1. position粘性方案的实现与详解
1.1.详细的知识
Position启用了我们经常使用的CSS属性，在布局和解决一些具体问题时带来了很好的解决方案，比如卡片的各种图标和logos。位置的粘性定位也是实现吸顶的解决方案之一。我们先来看看position有哪些属性值以及它们的相关含义：
拿数值相关来解释静态。此关键字指定元素的正常布局行为，即元素在文档常规流中的当前布局位置。此时，top、right、bottom、left和z-index属性无效。Relative在这个关键字下，元素会被放置在没有添加定位时的位置，然后在不改变页面布局的情况下调整元素的位置(因此，这个元素在没有添加定位时的位置会留空)。Position:relative对于table-*-group、table-row、table-column、table-cell和table-caption元素无效。绝对元素将被移出正常的文档流，没有为该元素留下任何空间。该元素的位置是通过指定该元素距最近的非静态定位祖先元素的偏移量来确定的。绝对定位的元素可以设置边距，不会与其他边距合并。固定元素将被移出正常的文档流，并且不会为该元素保留任何空间。相反，通过指定元素相对于屏幕视口的位置来指定元素的位置。当屏幕滚动时，元素的位置不会改变。打印时，元素将出现在每页的固定位置。fixed属性创建新的级联上下文。当元素祖先的transform、perspective或filter属性不为none时，容器将从viewport更改为祖先。Sticky元素根据正常的文档流进行定位，然后根据top、right、bottom和left的值相对于其最近的滚动祖先和包含块祖先(包括与表格相关的元素)进行偏移。偏移值不影响任何其他元素的位置。
MDN门户
关于粘着性，顾名思义，粘着一词在中文里是“粘着”的意思，它的作用是位置：相对和位置：固定的组合。当元素在屏幕中时，它是相对的，当它即将滚出显示屏时，它是固定的。这个属性被chrome放弃了，但后来得到了支持。
！-示例用法-nav { position:-WebKit-sticky；位置：粘性；top:0；}1.2 兼容性
如上图所示，position的sticky已经得到了各类浏览器的支持，而且很好的支持，除了safari需要-webkit-前缀支持。
演示实施：
*{填充：0；边距：0；} .容器{宽度：100%；背景：rgba(0，0，0， 5)；} .nav{宽度：100%；高度：50px文本对齐：居中；行高：50px背景：黑色；颜色：白色；位置：粘性；top:0；} .正文{宽度：100%；高度：10000px} div class= container div style= width:100%；高度：100像素；/div div class= nav position sticky sticky定位/div div class=body/div/div
1.3. 可能会踩得坑
使用position:sticky时，必须同时使用(顶部、左侧、右侧、底部)之一。否则，父元素不能有overflow:hidden或overflow:auto属性。否则，父元素的高度不能小于粘性元素的高度。否则，sticky元素只在其父元素中生效。2. JS监听scroll事件的吸顶方案
详细知识讲解的总体思路是，js监测滚动事件，当滚动到顶部时(距顶部距离为0时)，元素的位置属性动态更改为固定，进行固定定位，达到顶吸的效果。常用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 . addevent listener( scroll ，compute)；
以上就是本文关于Html5导航栏天花板方案的原理和比较实现。更多相关Html5导航栏天花板内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。