Javascript 位置已修复，无法在移动浏览器中工作_Javascript_Android_Html_Css_Position

Javascript 位置已修复，无法在移动浏览器中工作

javascript android html css

Javascript 位置已修复，无法在移动浏览器中工作,javascript,android,html,css,position,Javascript,Android,Html,Css,Position,如何在移动浏览器（ios和android）中固定元素位置？元素在ios

如何在移动浏览器（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>


.固定{
位置：固定；
排名：0；
左：0；
}
嗨，我的位置固定了
示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

位置：固定的

在大多数较旧版本的

iOS

和

Blackberry

中不起作用。我已经在大多数移动浏览器中尝试过这个修复，它在没有任何

JavaScript

插件的情况下运行顺利

使用

。已修复{
位置：固定；
顶部：0px；
左：0px；
宽度：320px；
高度：50px；
背景：红色；
-webkit背面可见性：隐藏；
/*--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^最重要的*/
}


嗨，我的位置固定了
示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

示例文本

如果它只在移动浏览器中，并且您不需要iOS和blackberry向后兼容，那么您可能希望使用媒体查询

@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>


Web应用程序模板
正文，ul，li{填充：0；边距：0；边框：0；}
正文{字体系列：helvetica；}
标题{背景色：#deb500；位置：绝对；z索引：2；顶部：0；左侧：0；宽度：100%；高度：45px；填充：0；}
页脚{背景色：#c27b00；位置：绝对；z索引：2；底部：0；左侧：0；宽度：100%；高度：48px；填充：0；边框顶部：1px实心#444；}
页眉、页脚{字体大小：20px；文本对齐：居中；颜色：#F3；字体重量：粗体；文本阴影：0-1px 0 rgba（0,0,0,0.5）；线条高度：45px；}
#包装{位置：绝对；z索引：1；顶部：45px；底部：48px；左侧：0；宽度：100%；背景：#aaa；溢出：自动；}
#滚动内容{位置：绝对；z索引：1；宽度：100%；填充：0；}
ul{列表样式：无；填充：0；边距：0；宽度：100%；文本对齐：左；}
li{填充：0 10px；高度：40px；线条高度：40px；边框底部：1px实心#ccc；边框顶部：1px实心#fff；背景色：#fafafafa；字体大小：14px；}
Web应用程序模板

一些东西
更多的东西
大人物
小东西
极客的东西
书呆子的东西
快的东西
慢的东西
好东西
坏东西
你的东西
我的东西
他们的东西
我们的东西
超级材料
优步的东西
东西
法国货
德国货
英语材料
美国货
东西

一些页脚内容

回答您自己的问题是可以的，但请正确回答。把问题描述清楚，不要做介绍（而要做相反的介绍）。。。你仍然可以编辑。嗨@Vicky。我怀疑你的问题之所以吸引了选票，是因为你用“闲聊”的措辞——起初，它读起来像一篇博客文章，而不是一个问题。发帖然后回答你自己的问题是绝对受鼓励的（）-注意把你的问题设计成一个问题，然后发帖回答，而不是在问题栏写一篇博客式的文章。希望这是有帮助的！背面可见性与固定位置有什么关系？@justnS，请参阅…绝对位置与固定位置不同，只有在滚动之前才会“显示”，然后标题才会消失。因此，该回复没有解决op的问题和要求。