How to Achieve True Fixed Positioning in Mobile Safari?

Positioning Elements Fixed in Mobile Safari

Positioning elements fixed relative to the viewport in Mobile Safari has been a recurring challenge. While the position: fixed property often fails to deliver the desired effect, innovative solutions are emerging.

Implementing a Fixed Position with JavaScript

Gmail recently introduced a technique that approximates fixed positioning. By leveraging real-time scroll events captured through JavaScript, one can keep an element anchored at the bottom of the page as the user scrolls. This solution is both effective and efficient.

To implement this technique, execute the following code:

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

This code assigns the top property of a div element named fixedDiv a new value based on the page's scroll offset, ensuring that it remains fixed at the bottom regardless of scrolling.

The above is the detailed content of How to Achieve True Fixed Positioning in Mobile Safari?. For more information, please follow other related articles on the PHP Chinese website!