位置固定在移动浏览器中不起作用
Position fixed not working in mobile browser
如何在移动浏览器(iOS和Android)中固定元素位置?元素仍然在ios <5和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
插件的情况下运行顺利。
使用
-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>
如果它只是在移动浏览器中,并且您不需要iOS和黑莓的向后兼容性,则需要使用媒体查询。
@media only screen and (max-device-width : 730px) {
.fixed {
position:fixed;
top:0;
left:0;
}
}
您也可以使用position:absolute 使标头固定尝试。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Web App Template</title>
<style type="text/css" media="all">
body,ul,li {padding:0;margin:0;border:0;}
body {font-family:helvetica;}
header{background-color:#deb500;position:absolute;z-index:2;top:0; left:0;width:100%;height:45px;padding:0;}
footer {background-color:#c27b00;position:absolute;z-index:2;bottom:0; left:0;width:100%;height:48px;padding:0;border-top:1px solid #444;}
header, footer{font-size:20px;text-align:center;color:#f3f3f3;font-weight:bold;text-shadow:0 -1px 0 rgba(0,0,0,0.5);line-height:45px;}
#wrapper {position:absolute;z-index:1;top:45px; bottom:48px; left:0;width:100%;background:#aaa;overflow:auto;}
#scroll-content {position:absolute;z-index:1;width:100%;padding:0;}
ul {list-style:none;padding:0;margin:0;width:100%;text-align:left;}
li {padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #ccc;border-top:1px solid #fff;background-color:#fafafa;font-size:14px;}
</style>
</head>
<body>
<header>Web App Template</header>
<div id="wrapper">
<div id="scroll-content">
<ul>
<li>Some Stuff</li>
<li>More Stuff</li>
<li>Big Stuff</li>
<li>Small Stuff</li>
<li>Geek Stuff</li>
<li>Nerd Stuff</li>
<li>Fast Stuff</li>
<li>Slow Stuff</li>
<li>Good Stuff</li>
<li>Bad Stuff</li>
<li>Your Stuff</li>
<li>My Stuff</li>
<li>Their Stuff</li>
<li>Our Stuff</li>
<li>Super Stuff</li>
<li>Uber Stuff</li>
<li>Stuff Stuff</li>
<li>French Stuff</li>
<li>German Stuff</li>
<li>English Stuff</li>
<li>American Stuff</li>
<li>Stuff</li>
</ul>
</div>
</div>
<footer>Some Footer Content</footer>
相关文章:
- 当我在浏览器中打开HTML文件时,javascript不起作用
- Javascript的某些部分在Chrome中不起作用,但在其他浏览器中可以完美工作
- 为什么简单的Promise语句在浏览器中不起作用
- 用于播放背景音乐的嵌入式flash播放器在IE浏览器中不起作用
- 带有Safari的Javascript;不起作用——所有其他浏览器都起作用
- 使用Javascript的Ajax请求在iPhone浏览器中不起作用
- 谷歌浏览器模式正则表达式在使用setCustomValidity动态创建表单时不起作用
- 为什么我的谷歌浏览器扩展程序在谷歌浏览器版本 41.0.2272.89 中不起作用
- 为什么这个JavaScript在浏览器中不起作用
- 多个 socket.io 客户端连接不起作用(谷歌浏览器,火狐浏览器)
- 脚本在web浏览器控件中不起作用
- 禁用浏览器中的后退按钮不起作用
- 将JSON对象转换为敲除observable在IE8中不起作用,但在所有其他浏览器中都起作用
- jQuery在我的网站上不起作用,但在我的浏览器上起作用
- 角度路由;在浏览器中直接访问URL时不起作用,但在单击时起作用
- 转到顶部按钮在Firefox浏览器中不起作用
- javascript代码在浏览器中不起作用
- JavaScript文件在浏览器中不起作用,但它在代码笔中起作用
- Javascript浏览器通知不起作用
- 浏览器关闭事件 对于火狐浏览器不起作用