29

モバイル ブラウザ (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>
4

3 に答える 3

37

position: fixediOSおよびの古いバージョンのほとんどでは機能しません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>

于 2013-10-08T17:15:31.620 に答える
-4

モバイル ブラウザのみで、iOS と blackberry の下位互換性が必要ない場合は、メディア クエリを使用することをお勧めします。

@media only screen and (max-device-width : 730px) {
    .fixed {
        position:fixed;
        top:0;
        left:0;
    }
}
于 2013-10-08T17:57:15.823 に答える