Menu
How to make an element position fixed in Mobile browser (ios and android) ? Element still scrolls with below code in ios < 5 and android< 4
<html> <head> <style> .fixed{ position:fixed; top:0; left:0; } </style> </head> <body> <div class="fixed"> Hi I m Position Fixed </div> <div> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> </div> </body> </html> 
414
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.
The fixed positioning property helps to put the text fixed on the browser. This fixed test is positioned relative to the browser window, and doesn't move even you scroll the window.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
position: fixed doesn't work in most of the older versions of iOS and Blackberry. I have tried this fix in most of the mobile browsers and it worked smoothly without any JavaScript plugins.
Use
-webkit-backface-visibility: hidden;
.fixed { position: fixed; top: 0px; left: 0px; width: 320px; height: 50px; background: red; -webkit-backface-visibility: hidden; /*--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Most Important*/ }<div class="fixed"> Hi I m Position Fixed </div> <div> sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/> </div>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