JS解决position:sticky的兼容性问题

helloworldcoding 发布于2019-08-21 17:05 / 1760人阅读

摘要：解决的兼容性问题在项目中有用到的布局，可是由于兼容性问题，在安卓端没有很好的兼容，所以为了彻底解决这个问题只能写一个组件来解决这个麻烦的问题，这里为什么是组件而不是指令是因为，是有原因的，下面会讲到。

JS解决position:sticky的兼容性问题

在项目中有用到sticky的布局，可是由于兼容性问题，在安卓端没有很好的兼容，所以为了彻底解决这个问题只能写一个组件来解决这个麻烦的问题，这里为什么是组件而不是指令是因为，是有原因的，下面会讲到。

position:sticky的兼容性以及作用

Caniuse上显示sticky的兼容性如下：

Sticky的作用相当于relative和fixed的结合体，当修饰的目标节点再屏幕中时表现为relative，当要超出的时候是fixed的形式展现，因为这个特性，我们就可以来实现一个sticky的模拟效果。

sticky组件实现 template部分

代码解读：这里我使用了组件来实现，而不用指令来实现的原因是：指令虽然是无侵入性的，更方便使用，可是有一个弊端就是当修饰的节点fixed的时候会脱离文档流，会改变滚动的条的高度，如果仅仅是配合原生滚动条来实现是没问题的（当然这也会存在滚动过快的问题），可是由于是配合自定义滚动所以，采取这种折中的方式来实现。最外层是一个sticky层，判断浏览器是否支持sticky，不支持就使用relative来代替，这样也就不会改变浏览器高度的情况了，然后动态改变stick-warp层的postion来实现效果。

css部分

代码解读：这里的warp层的背景色设置和sticky一致，这样过渡不会太生硬，高度和top都根据用户对外层sticky的自定义来实现，这样这部分简单用css就可以完成了。

JS部分

代码解读：这里面主要先用cssSupport来判断一下浏览器的支持情况，然后通过多自定义滚动y-scroll事件的监听，监听top值的改变来实现sticky-warp层的fixed和absolute的转换。大概原理的思路及实现过程就是上面这样，对于自定义的滚动的github地址：https://github.com/yejiaming/scroll，sticky组件以及原生滚动下的指令参考的实现的github地址如下：https://github.com/yejiaming/sticky

云服务器 GPU云服务器 Js的兼容问题如何解决兼容问题?Win11仅支持1个I 解决问题的方法云计算解决的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89124.html

解决页面滚动时吸顶操作不能及时响应bug

摘要：这个界限就是该元素顶部距离窗口顶部的距离等于该元素设置的值比如以下像素分割线当我的顶部距离窗口顶部为值时，我就会像一样在距离窗口值处的时代发送分效果图当页面滚动到距离黄色区块顶部时，黄色区块就会在窗口顶部处，页面再往下滚动距离也不会变。 position: sticky; fixed 吸顶页面滚动结束后页面才渲染需求经常会有这样的需求，当页面滚动到某一个位置fixedTopV...

gaomysion 2019-08-30 13:18 评论0 收藏0
解决页面滚动时吸顶操作不能及时响应bug

摘要：这个界限就是该元素顶部距离窗口顶部的距离等于该元素设置的值比如以下像素分割线当我的顶部距离窗口顶部为值时，我就会像一样在距离窗口值处的时代发送分效果图当页面滚动到距离黄色区块顶部时，黄色区块就会在窗口顶部处，页面再往下滚动距离也不会变。 position: sticky; fixed 吸顶页面滚动结束后页面才渲染需求经常会有这样的需求，当页面滚动到某一个位置fixedTopV...

wapeyang 2019-08-20 13:29 评论0 收藏0
解决页面滚动时吸顶操作不能及时响应bug

摘要：这个界限就是该元素顶部距离窗口顶部的距离等于该元素设置的值比如以下像素分割线当我的顶部距离窗口顶部为值时，我就会像一样在距离窗口值处的时代发送分效果图当页面滚动到距离黄色区块顶部时，黄色区块就会在窗口顶部处，页面再往下滚动距离也不会变。 position: sticky; fixed 吸顶页面滚动结束后页面才渲染需求经常会有这样的需求，当页面滚动到某一个位置fixedTopV...

gggggggbong 2019-08-01 16:10 评论0 收藏0
WEB移动端粘黏吸顶效果的解决方案

摘要：原文链接一般的吸顶，通常是给上一个定位便可实现，而类似于上图这样的粘黏吸顶，也是一个比较常见的需求粘黏吸顶大概的思路是这样首先，给吸顶栏一个或者定位，通过去监听事件触发一个判断吸顶栏高度的函数，当吸顶栏的高度距离可视区域顶部小于等于时，将其原文链接: Fyerls Blog showImg(https://segmentfault.com/img/bVJMAs?w=360&h=240...

macg0406 2019-08-20 14:35 评论0 收藏0