首頁  >  文章  >  web前端  >  如何在Mobile Safari中實現真正的固定定位?

如何在Mobile Safari中實現真正的固定定位?

Barbara Streisand
Barbara Streisand原創
2024-11-17 03:09:03619瀏覽

How to Achieve True Fixed Positioning in Mobile Safari?

在Mobile Safari 中固定的定位元素

在Mobile Safari 中相對於視口固定的元素定位一直是一個反覆出現的挑戰。雖然position: 固定屬性常常無法達到預期的效果,但創新的解決方案正在出現。

使用 JavaScript 實現固定位置

Gmail 最近引入了一種近似的技術固定定位。透過利用透過 JavaScript 擷取的即時捲動事件,可以在使用者捲動時將元素錨定在頁面底部。此解決方案既有效又有效率。

要實現此技術,請執行以下程式碼:

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

此程式碼為名為fixedDiv 的div 元素的top 屬性指派一個新值,該值基於頁面的捲動偏移量,確保無論滾動如何,它都保持固定在底部。

以上是如何在Mobile Safari中實現真正的固定定位?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn