18

ユーザーがマストヘッドをスクロールするとメニューが固定されるように、ユーザーのスクロール位置をチェックする次の関数があります

function checkScrolling() {
    if( $(window).scrollTop() > $('.masthead').height() ) { // we check against ACTUAL height
        $('.menu').addClass('fixed');
    }else {
        $('.menu').removeClass('fixed');
    }
}

デスクトップとタッチ スクリーンのイベント リスナーは次のとおりです。

$(document).bind('touchstart touchend touchcancel touchleave touchmove', function(e){
    checkScrolling();
});

$(window).scroll(function(){
    checkScrolling();
});

ただし、タッチイベントは、タッチムーブ中にメニューを確実に固定するだけです。上下にスワイプして非常に速くスクロールすると、メニューが固定または固定解除されるまでに遅延が発生します。

これを修正する方法についてのアイデアはありますか? ここでコード例を参照してください: http://dev.driz.co.uk/mobileMasthead.html (以下の回答に基づいて修正されていますが、iPad または iPhone では正しく動作しません)

更新: そして、トピックを読んでみると、スクロール中にスクロール位置をチェックするような JS は発生しないことがわかります...しかし... http://www.facebook.com/home/にないことに気付きましたiPadでテストするときのこの問題。したがって、iScroll などのカスタム JavaScript スクロールバーを使用しなくても、この効果を実現することは間違いなく可能です。

4

9 に答える 9

7

たぶん私は質問を間違って理解していますが、高速スクロールで機能を確保するために、純粋な CSS の方法 (別名「ファンシー」効果を偽造) に取り組んでみませんか?

オールドスクール (高速だが原始的)

HTML

<div id="menu2"></div>
    <div class="scroll" id="scroller">
        <div id="overlay"></div>
        <div id="menu"></div>
    </div>

シンプルな CSS の場合:

html, body { overflow: hidden; height: 100% }
body { margin:0; padding:0; }

 .scroll {
     -webkit-overflow-scrolling: touch;
     height:960px;
     width:640px;
 }

 #menu2 {
     width:640px;
     height:20px;
     background:red;
     position:absolute;
     z-index:-1;
 }

 #menu {
     width:100%;
     height:20px;
     background:red;
     z-index:0;
 }

ここで実際の例を見ることができます。

少し原始的かもしれませんが、ちょっと！できます！:)

ニュースクール（ファンシーだが遅い）

提供された他のすべての回答を確認してください。

ただし、モバイル デバイスで JavaScript をスクロールと組み合わせて使用​​すると、速度に関して多くの問題が発生することが「知られている」ことに注意してください。

そういうわけで、単純な CSS アプローチの方が優れているのではないかと思います。

モバイル デバイスでの JavaScript とスクロール (およびその他の機能) について学びたい場合は、次の 2 つの記事を読むことを強くお勧めします。

于 2013-07-05T23:21:39.243 に答える
5

Facebook は JavaScript を使用せず、純粋な CSS を使用します。

position: -webkit-sticky;

正しく覚えていれば、スクロールすると要素が親コンテナーの上部に固定されます。

于 2013-07-01T17:13:52.253 に答える
2

ウィンドウ、ドキュメント、ボディではなく、カスタム コンテナーにスクロール イベントをアタッチする必要がありました。

iOS では、これらのハードウェア アクセラレーションによるウィンドウのスクロール動作中に、プログラムで反応することはできません。

ここにフィドルがあります：ラッパー：

<div id="content">

あまり関係のない css:

html,body,#content {
    width:100%;
    height:100%;
}
#content {
    background-color: lightblue;
    overflow:scroll;
}

リスナーをコンテナーにアタッチします。

function checkScrolling() {
    if ($('#content').scrollTop() > mastheadHeight) {
        menu.addClass('fixed');
    } else {
        menu.removeClass('fixed');
    }
}

$('#content').scroll(function () {
    checkScrolling();
});

JS のみのフォールバックでは、ここで動作することがわかります。

http://jsfiddle.net/jaibuu/YqPzS/

直接URL: http://fiddle.jshell.net/jaibuu/YqPzS/show/

于 2013-07-05T21:01:08.690 に答える
1

これを起動するためにタッチイベントが必要ですか？最新のデバイスは$(window).scroll()、イベントとscrollTop値を返す必要があります。古い Android および ios5 より前 (私が思うに) ではposition:fixed:、ビューポートがどのように機能したかが原因で、期待どおりに機能しませんでした。ただし、すべての新しいリリースで修正されています。

デバイスをさらにデバッグするには、Adobe Edge Inspect を強くお勧めします。console.logscrollTop を使用して、関心のあるデバイスが実際にトリッキーなしで正しく動作するかどうかを確認できます。無料版で必要なものがすべて手に入ります。

于 2013-06-21T17:55:10.607 に答える
1

スクロール イベントを処理する優れた方法は、チェックをスクロール イベントにアタッチしないことです。この方法は多くのリソースを必要とし、古いブラウザーではうまく機能しません。幸いなことに、それを行うためにタイム ループを実行するだけで、より多くの制御を行うことができます。そのようなコードワイズ：（Twitterで使用されています）

var MyMenu = $('#menu'),
    didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        //Do your check here
        checkScrolling();
    }
}, 180);

$('.masthead').height() は、この checkScrolling 関数の外 (より高いスコープ) に配置する必要があります。この種の操作は多くのリソースを必要とし、常に jquery に「要素を選択」して計算するように要求するためです。サイズは最終的にアプリケーションを遅くします:

  var headerHeight = $('.masthead').height()
  function checkScrolling()
  .....

最後に、interval 属性の値を変更できます (現在は 180 (画面のリフレッシュ時間は 60hz を少し上回っています))。アプリのパフォーマンスを向上させたい場合は、この値を大きくすることができますが、精度が低い）

John Resig と Twitter に感謝します: http://ejohn.org/blog/learning-from-twitter/

それがAjiosを助けたことを願っています!

于 2013-06-26T11:04:51.643 に答える
1

私は効率のためにあなたの機能をテストしました。これを試してみてください

function checkScrolling() {         
    if( $(window).scrollTop() > mastheadHeight )menu.css('position','fixed');
    else menu.css('position','');
}

これにより、addClass および RemoveClass の関数呼び出しが削減され、実行時間が有効になります。実行時間を短縮したい場合は、純粋な JavaScript を使用することをお勧めします

于 2013-07-02T18:13:28.493 に答える
1 
$(document).ready(function(){
     var p = $("#stop").offset().top;

    $(window).scroll(function(){
        if(p<$(window).scrollTop()){
            console.log("div reached");
            $("#stop").css({position:"fixed",top:0});
        }
        else{
            console.log("div out");
            $("#stop").css({position:"static"});
        }

    })
});

これが役立つと思います。

全体のコードはjsfiddle.netにあります。

http://alexw.me/ipad2/のオンライン ipad2 シミュレーターのサファリを使用して ipadでテストしたところ、そこで動作しました。なので、本物のiPadでも動くと思います。

于 2013-07-02T18:28:04.993 に答える