2

このURLのようなスティッキーヘッダーを作成したい：http ：//www.cssplay.co.uk/layouts/fixit.htmlが完了しました！しかし、このURLをiPadのSafariに置くと、ヘッダーの修正にも失敗します。

iPad Safariでスティッキーヘッダーを作成する方法を知っている人はいますか？

前もって感謝します！

4

2 に答える 2

2

実際、iOSデバイス（iPad、iPhoneなど）でこの問題に対処するために必要なのは、CSSに以下を追加することだけです。

#container {
  position:fixed; 
  top:120px;
  bottom:0px; 
  overflow:auto; 
}

この例では、次のことを前提としています。

  • スクロールする部分は、ヘッダーの120px下から始まります（つまり、ヘッダーの高さは120pxになります）
  • スクロールしたいdivにはid='container'があります
  • 2本の指でスクロールします。1本の指を使用すると、ヘッダーも移動します。

これは実際には、ユーザーに選択肢を与えるので、iPadではかなりクールです（全体を移動するか、1本または2本の指を使用してヘッダーを表示したままにします）。フッターにも機能します（ボトム値を変更します）。

最後に、これは「Apple」ブラウザ用であることに注意してください（iPad、Mac Safari、Chromeでテストに成功しました）。他の何かをサポートしたい場合は、次のようなものを使用して別のコードを作成する必要があります。

if (navigator.userAgent.match("Apple") == null) {
    /* use a different container id */
}

2011年10月7日に編集：Thxtochris-barr.comこの解決策を見つけました。次のコードを追加するだけです。

<script>
function touchScroll(id){
    var el=document.getElementById(id);
    var scrollStartPos=0;

    document.getElementById(id).addEventListener("touchstart", function(event) {
        scrollStartPos=this.scrollTop+event.touches[0].pageY;
        event.preventDefault();
    },false);

    document.getElementById(id).addEventListener("touchmove", function(event) {
        this.scrollTop=scrollStartPos-event.touches[0].pageY;
        event.preventDefault();
    },false);
}
</script>

<body onload="touchScroll('container')">

そしてそれはiOS（iPhone、iPad）とAndroidで1本の指だけで動作します!!!

于 2011-08-18T10:17:18.083 に答える
0

Webページの良いところは、いつでもそのソースコードを簡単に検査できることです。

ページソースを見ると、cssセクションに#headerが表示されます。

position:fixed;

サイズやその他のフォーマット手順も同様です。

于 2010-08-20T09:37:29.087 に答える