JS解决position:sticky的兼容性问题的方法_position:sticky兼容性 - CSDN文库

position:sticky

129 浏览量更新于2023-03-03 评论收藏 55KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

本篇文章主要介绍了JS解决position:sticky的兼容性问题的方法，具有一定的参考价值，感兴趣的小伙伴们可以

参考一下

在项目中有用到sticky的布局，可是由于兼容性问题，在安卓端没有很好的兼容，所以为了彻底解决这个问题只能写一个组件

来解决这个麻烦的问题，这里为什么是组件而不是指令是因为，是有原因的，下面会讲到。

position:sticky的兼容性以及作用的兼容性以及作用

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

Sticky的作用相当于relative和fixed的结合体，当修饰的目标节点再屏幕中时表现为relative，当要超出的时候是fixed的形式展

现，因为这个特性，我们就可以来实现一个sticky的模拟效果。

sticky组件实现组件实现

template部分

<template>

<div class="sticky" :style="getPosition">

<div class="sticky-warp">

<slot></slot>

</div>

</div>

</template>

代码解读：这里我使用了组件来实现，而不用指令来实现的原因是：指令虽然是无侵入性的，更方便使用，可是有一个弊端就

是当修饰的节点fixed的时候会脱离文档流，会改变滚动的条的高度，如果仅仅是配合原生滚动条来实现是没问题的（当然这

也会存在滚动过快的问题），可是由于是配合自定义滚动所以，采取这种折中的方式来实现。最外层是一个sticky层，判断浏

览器是否支持sticky，不支持就使用relative来代替，这样也就不会改变浏览器高度的情况了，然后动态改变stick-warp层的

postion来实现效果。

css部分

<style scoped lang="less" rel="stylesheet/less">

.sticky {

width: 100%;

.sticky-warp {

width: 100%;

background: inherit;

will-change: change;

height: inherit;

top: inherit;

}

}

</style>

代码解读：这里的warp层的背景色设置和sticky一致，这样过渡不会太生硬，高度和top都根据用户对外层sticky的自定义来实

现，这样这部分简单用css就可以完成了。

JS部分

<script type="text/babel">

export default {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38680475

粉丝: 6
资源: 933

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈