如何在Mobile Safari中实现固定位置？

在 Mobile Safari 中固定位置

在 Mobile Safari 中相对于视口固定元素的位置一直是一个长期的挑战。使用position:fixed的传统方法在这个浏览器中经常失败。

替代解决方案

Gmail最近推出了一种创新的解决方案，它提供了固定位置的近似值。诀窍在于动态调整滚动时元素的顶部位置。

JavaScript 实现

这种替代方法只需几行 JavaScript 即可实现：

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

在此代码中，onscroll 事件侦听器使用 id="fixedDiv" 更新元素的顶部 CSS 属性。使用的公式确保元素始终位于视口的底部，并有 25 像素的小偏移。

通过不断调整元素在滚动上的位置，此代码有效地模拟了保持锚定的固定位置到 Mobile Safari 中的视口。

以上是如何在Mobile Safari中实现固定位置？的详细内容。更多信息请关注PHP中文网其他相关文章！