位置固定在移动浏览器中无法使用 [英] Position fixed not working in mobile browser
本文介绍了位置固定在移动浏览器中无法使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在移动浏览器（ios和Android）中固定元素位置？
元素仍然滚动，下面的代码在ios< 5和android< 4
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>
推荐答案
position：fixed 在 iOS 和 Blackberry 的大多数旧版本中不起作用。我在大多数移动浏览器中尝试过这个修复，它没有任何 JavaScript 插件，工作顺利。
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.
.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>
这篇关于位置固定在移动浏览器中无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
