Menu
Is it possible to position an element fixed relative to the viewport in Mobile Safari? As many have noted, position: fixed doesn't work, but Gmail just came out with a solution that almost is what I want – see the floating menu bar on the message view.
Getting real-time scroll events in JavaScript would also be a reasonable solution.
972
position: fixed doesn't work on iPad and iPhone.
To force it work the same way as Mobile Chrome, you have to use position: absolute, height: 100% for the whole page or a container for your pseudo-fixed elements, intercept scroll, touchend, focus, and blur events. The trick is to put the tapped input control to the bottom of screen before it activates focus.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform , perspective , or filter property set to something other than none (see CSS Transforms Spec), which then causes ...
This fixed position div can be achieved in just 2 lines of code which moves the div on scroll to the bottom of the page.
window.onscroll = function() { document.getElementById('fixedDiv').style.top = (window.pageYOffset + window.innerHeight - 25) + 'px'; }; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
