h5吸顶效果,html吸顶效果

哪些想啥提啥的产品们

　　最近我做了一个需求，准确的说是一个迭代的需求：我增加了头部总览(类似下图)，更好的让用户观察营销的变化。故事的开始就这样悄悄地埋下了伏笔。

　　以前这个页面只是一个评测列表(可以拉上来加载)。为了使数据更容易阅读，列表的头部采用了固定的布局。然而，在添加这个概述时，没有提到产品，所以我简单粗暴地将列表标题更改为相对布局、ok和test。

　　但是第二天发现有很多数据要拉起来加载。列表头被上推后，如果我想再次过滤，我必须再次向上滑动列表才能看到它。这种体验非常糟糕。所以我的同事说，要么询问产品，要么修改概述加概述。

　　我的第一反应是，我怕我提了之后，产品会让我只修复滤镜列表的头部。注意那个。

　　于是就有了下面的对话：

　　果然，你怕什么？但是就像一个同事说的，你要含泪接受你提出的要求。

　　经过评论，加上sticky的方案，确实是最优解。

局部吸顶

　　以下代码是页面的dom结构

　　div ID= demo class name={ style . demo } H3 ID= title 这是一个概述标题/H3 ID= content class name= content class name= div 筛选器栏 H3这是列表的标题/H3 H3 H3可筛选/H3 H3这是滚动列表/H3/div ul class name= list { arr . map({ key，Label })=Li key={ key } { Label }/Li)}/ul/div/div

JS 实现

　　我觉得5分钟做不到，就跑了。

　　现在我们试着用JS实现一下。我们先梳理一下思路：

　　监控页面的滚动。当ul元素的顶部距离页面顶部大于title的高度时，添加一个css类，使过滤头吸住；当ul元素与顶部的距离小于等于标题高度时，删除添加的类，取消过滤头顶的JS代码。

　　use effect(()={ const demo=document . query select( # demo )；const content=document . query selector(# content))；const title height=document . query selector( # title )。客户端高度；let fixed=falseDemo.addEventListener (scroll ，(e)={//添加天花板if(！fixed e . target . scroll top=title height){ fixed=true；content . class list . add( with-fixed )；}//取消天花板if(fixed e . target . scroll top title height-5){ content . class list . remove( with-fixed )；固定=假；} });}, []);看着不难，其实代码上线前还有很大的优化空间，后面会分析补充。

CSS Viewport实现

　　 JS看似很简单，但就像那句流行的话：这突如其来的噩耗让本就不富裕的家庭雪上加霜。在这个带下拉加载的页面中，我们已经在监控中做了很多逻辑处理，所以如果能用CSS实现，尽量不要再麻烦JS了。

　　首先梳理思路，深挖产品需求：

　　将筛选头保持在可视范围内(顶吸)，以确保筛选；当列表数据很多的时候，尽可能多的显示列表，也就是不用看总览表头；列表被拉起并加载；在整理上述思路时，我们发现，其实当列表很长时，overview头是隐藏的，简单用伪代码表示(vh是视口单位，100vh表示整个屏幕可见高度):

　　if(title height filterbar height list height 100 VH){ title . hide()；}那么如何隐藏概览标题，而过滤器标题和列表正好在视口之外呢？

　　filterbar Height List Height=100vh当用户向上划，只需要内容(滤镜头和列表)正好是一个viewport高度(100 VH)时，overview头正好隐藏，滤镜头正好吸顶。CSS的实现与此类似：

　　//不是完整的代码。请查看演示：演示{:全局{。标题{身高：15VH详情请见。行高：15vh文本对齐：居中；border-bottom:1PX solid # eee；背景色：# fff} .滤棒{高度：15vw背景色：# 888；显示器：flex对齐-项目：居中；} .list { max-height:calc(100 VH-15v w)；//这里的设置很重要溢出：滚动；背景色：rgba(127，255，212， 8)；}

最优实现 CSS Sticky

　　 CSS:sticky中有一个不常见的position属性值；

　　MDN官方文档摘录：

　　根据正常的文档流定位元素，然后根据相对于其最近的滚动祖先和最近的块级祖先(包括与表相关的元素)的top、right、bottom和left值进行偏移。粘性可以认为是相对定位和固定定位的混合。元素在越过某个阈值之前被相对定位，然后被固定。

　　这里我们改变使用JS的方案，只需要将filter-bar的定位属性改为粘性定位，从而解除对JS的依赖；演示{最大高度：100%；溢出：滚动；过滤条{位置：粘性；top:0；} } demo类作用于最外层的dom( div className={style.demo})，视觉高度为100vh，内容超过高度时滚动；filter-bar元素采用粘性定位，当与demo元素的高度距离大于0时，采用相对定位，即以正常文档流的形式定位；当高度小于等于0时，采用固定定位，达到吸顶的效果。

对比

　　你以为CSS很简单吗？稍微设置一下就可以了。就觉得内容高度正好100vh，需要一点(yun)考(qi)。H5经常被写。sticky的方案相信也是新手粘的。实际上，它不仅简单，而且至少比JS有两个优点：

　　如果JS就像上面那样，直接把过滤头的定位改成固定定位。视力好的人其实可以感受到列表跳动的瞬间，即列表会突然上移滤棒的高度，填补滤头与正常文档流之间的空隙；(解决方法是在过滤头外面设置一层dom，并赋予其固定的高度，这样过滤头就脱离了正常的文档流，但高度还在)；用JS操作Dom元素重排的时候，面试官每年说的重绘重制我就不多说了，肯定比CSS实现更消耗性能；当然，视口方案也有ios手机的兼容性问题。由于safari在头部和底部滑动时可见度会发生变化，所以当条形可见时，实际100vh高于屏幕可见高度，会导致天花板顶部被遮挡。到目前为止，虽然网上有很多关于身高的说法：-WebKit-fill-available；但对这种情况无效；但是只要依赖100vh，都面临这个困境。safari太精彩了，下一个IE就是它了。

　　经过以上分析，IOS safari上100vh的致命问题会让这种100vh的纯CSS方案褪色。但是PC页面，或者像我这样你想写的页面是在APP里运行的(就是没有栏)，那么这个方案是可行的。所有的计划都要具体分析，人无完人。这里只是提高一种思维方式，获得见识。

　　而粘性方案不依赖于100vh，可以写成100%，所以没有这种担心，所以相比之下最优解是粘性的；但是身高：100%是个无底洞。您需要通过滚动从html标记一直写到容器元素。

弹性吸底

　　说完局部弹性顶吸，再来说一个常见的，选择性底吸：当页面内容小于100vh时，我们希望页脚为底吸。当页面内容大于100vh时，页脚处于正常的文档流中，使内容的可视区域变大，不会因为内容太少而影响美观，如图：

　　还有很多人不像第一张图那样做定位，因为他们坚信自己网站的内容不会用光，而在以前，更常见的是在底部固定定位。

　　弹性底吸采用最小高度加绝对定位，实现非常简单。核心代码不超过5行css:

　　身体{位置：相对；最小高度：100vh}页脚{宽度：100%；位置：绝对；底部：0；}原理是内容区域最小高度为一屏，然后底部相对于屏幕绝对定位；内容大的时候，高度大于100vh，因为依赖于bottom:0；所以会一直吸到底，这就是诀窍。

　　Height: -webkit-fill-available对这个场景有效。

　　以上就是本文关于H5布局中实现纯CSS的上下吸收的步骤。更多相关CSS顶底吸收，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。