位置固定不工作在移动浏览器 [英] Position fixed not working in mobile browser
本文介绍了位置固定不工作在移动浏览器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使固定在移动浏览器(iOS和Android)的元素位置? 元素依然滚动低于code在IOS< 5和Android< 4
< HTML>
< HEAD>
<风格>
。固定{
位置:固定;
顶部:0;
左:0;
}
< /风格>
< /头>
<身体GT;
< DIV CLASS =固定>
您好我M档位固定
< / DIV>
< DIV>
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
< / DIV>
< /身体GT;
< / HTML>
解决方案
位置:在大多数的旧版本除其他iOS和黑莓的固定
不工作。我已经试过此修复程序在大部分的移动浏览器和它的工作顺利
没有任何JavaScript的插件。
< HTML>
< HEAD>
<风格>
。固定{
位置:固定;
顶部:0px;
左:0px;
宽度:320px的;
高度:50像素;
背景:红色;
-webkit-背面能见度:隐藏; /*最重要*/
}
< /风格>
< /头>
<身体GT;
< DIV CLASS =固定>
您好我M档位固定
< / DIV>
< DIV>
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
样品文字< BR />
< / DIV>
< /身体GT;
< / HTML>
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
doesnt work in most of the older versions of amongst others iOS and Blackberry. I have tried this fix in most of the mobile browsers and it worked smoothly
without any javascript plugins.
<html>
<head>
<style>
.fixed{
position:fixed;
top:0px;
left:0px;
width:320px;
height:50px;
background:red;
-webkit-backface-visibility:hidden; /*Most Important*/
}
</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>
这篇关于位置固定不工作在移动浏览器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文