位置固定不工作在移动浏览器 [英] Position fixed not working in mobile browser

查看：120
本文介绍了位置固定不工作在移动浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何使固定在移动浏览器（iOS和Android）的元素位置？ 元素依然滚动低于code在IOS＆LT; 5和Android＆LT; 4 

 ＆LT; HTML＆GT;
 ＆LT; HEAD＆GT;
＆LT;风格＆GT;
     。固定{
      位置：固定;
      顶部：0;
      左：0;
    }
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
     ＆LT; D​​IV CLASS =固定＆GT;
     您好我M档位固定
     ＆LT; / DIV＆GT;
    ＆LT; D​​IV＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;

    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

位置：在大多数的旧版本除其他iOS和黑莓的固定不工作。我已经试过此修复程序在大部分的移动浏览器和它的工作顺利 没有任何JavaScript的插件。

 ＆LT; HTML＆GT;
 ＆LT; HEAD＆GT;
＆LT;风格＆GT;
 。固定{
    位置：固定;
    顶部：0px;
    左：0px;
    宽度：320px的;
    高度：50像素;
    背景：红色;
    -webkit-背面能见度：隐藏; /*最重要*/
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
     ＆LT; D​​IV CLASS =固定＆GT;
     您好我M档位固定
     ＆LT; / DIV＆GT;
    ＆LT; D​​IV＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;
       样品文字＆lt; BR /＆GT;

    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

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屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆