哪些浏览器支持position:sticky

时间: 2023-10-25 08:33:34 浏览: 421

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

在项目中有用到sticky的布局，可是由于兼容性问题，在安卓端没有很好的兼容，所以为了彻底解决这个问题只能写一个组件来解决这个麻烦的问题，这里为什么是组件而不是指令是因为，是有原因的，下面会讲到。 position:sticky的兼容性以及作用 Caniuse上显示sticky的兼容性如下： Sticky的作用相当于relative和fixed的结合体，当修饰的目标节点再屏幕中时表现为relative，当要超出的时候是fixed的形式展现，因为这个特性，我们就可以来实现一个sticky的模拟效果。 sticky组件实现 template部分 <template> <div clas 在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个问题，我们可以采用JavaScript编写一个组件来模拟`position: sticky` 的效果，以确保在所有目标平台上的一致性。让我们理解`position: sticky` 的工作原理。它实际上是`relative` 和 `fixed` 两种定位方式的结合。当元素在视口内时，它表现得像相对定位；一旦元素开始超出其父容器的边界，它就会转换为固定定位，保持在屏幕的特定位置。这种特性在创建例如表头、侧边栏导航等需要在滚动时保持可视的元素时非常有用。由于在某些浏览器中`position: sticky` 的兼容性不佳，我们可以创建一个名为“sticky”的Vue组件来实现这个功能。组件的模板部分包含一个外部的`sticky`类的`div`，以及内部的`sticky-warp`类的`div`，用于包裹用户传递的内容。 ```html <template> <div class="sticky" :style="getPosition"> <div class="sticky-warp"> <slot></slot> </div> </div> </template> ``` CSS部分主要负责样式设置，确保`sticky-warp`的背景色与`sticky`层一致，以平滑过渡，并根据用户的定制调整高度和顶部位置。 ```css .sticky { width: 100%; } .sticky-warp { width: 100%; background: inherit; will-change: change; height: inherit; top: inherit; } ``` 接下来，JavaScript 部分用于检测浏览器是否支持`position: sticky`。如果支持，直接使用CSS属性；如果不支持，我们将在滚动事件中动态改变`sticky-warp`的`position`，模拟`position: sticky`的效果。 ```javascript <script> export default { data() { return {}; }, computed: { getPosition() { var position = this.cssSupport('position', 'sticky') ? 'sticky' : 'relative'; return 'position:' + position; } }, props: {}, beforeMount() {}, mounted() { this.init(); }, deactivated() { if (this.cssSupport('position', 'sticky')) return; // 复位 var elWarp = this.$el.querySelector('.sticky-warp'); elWarp.style.position = 'absolute'; }, methods: { init() { if (this.cssSupport('position', 'sticky')) return; var el = this.$el, target = this.$el.parentNode, elWarp = this.$el.querySelector('.sticky-warp'), top = this.getNumberValue( document.defaultView.getComputedStyle(el).top ); this.addScrollListen(target, (event) => { if (el.getBoundingClientRect().top <= top) { elWarp.style.position = 'fixed'; } if ( el.getBoundingClientRect().top >= 0 && elWarp.style.position != 'absolute' ) { elWarp.style.position = 'absolute'; } }); }, cssSupport(attr, value) { var element = document.createElement('div'); if (attr in element.style) { element.style[attr] = value; return element.style[attr] === value; } return false; } } }; </script> ``` 在这个组件中，我们使用`cssSupport`方法检查浏览器是否支持`position: sticky`。如果不支持，我们在`init`方法中添加滚动监听器，当元素滚动到指定位置时，改变`sticky-warp`的`position`属性，使其在滚动时固定或绝对定位。在组件被停用时，我们需要恢复原始状态，以防止影响其他操作。总结起来，通过创建一个Vue组件并利用JavaScript来检测和模拟`position:sticky`，我们可以有效地解决在不支持`position: sticky`的浏览器（尤其是旧版Android设备）上的兼容性问题。这种方式保证了布局在各种环境下的稳定性，同时也提供了良好的用户体验。

现代浏览器都支持`position: sticky`属性，包括： - Chrome （版本 56 及以上） - Firefox （版本 59 及以上） - Safari （版本 6.1 及以上） - Opera （版本 44 及以上） - Edge （版本 16 及以上） - Internet Explorer 不支持`position: sticky` 需要注意的是，一些旧版的浏览器可能不支持该属性，因此在使用时需要进行兼容性处理。

阅读全文

哪些浏览器支持position:sticky

相关推荐

position:sticky用法介绍及浏览器兼容性

position:sticky; position:fixed;

position: sticky

如何在不同的浏览器中实现position:sticky的效果，并提供兼容性支持？

position: sticky;

uniapp position: sticky

position:sticky出现抖动

position:sticky不生效

position: sticky占高度

position:sticky啥意思

position: sticky怎么使用

position: sticky 解释一下

position: sticky;使用

position: sticky; top: 0;

position:sticky ios 抖 闪

position: sticky;设置宽度

position: sticky;和fixed

css中的position: sticky介绍

最新推荐

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

CSS使用position:sticky 实现粘性布局的方法

2000-2021年中国科技统计年鉴（分省年度）面板数据集-最新更新.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

【数据传输高速公路】：总线系统的深度解析

position:sticky ios 抖闪