3

特定のポイントまでスクロールした後、サイドバーを上部に固定しようとしています。

var sidebarTopPos = $('#sidebar').offset().top;
$(window).scroll(function(event) {
    if ($(window).scrollTop() >= sidebarTopPos) {
        $('#sidebar').css({
            position: 'fixed',
            top: 0
        });
    }
    else {
        $('#sidebar').css({
            position: 'relative'
        });
    }
});​

このjsfiddleを見てください

スクロールバーを下にドラッグすると、すべてが正常に機能します。ただし、マウスホイールを使用してスクロールしようとすると、サイドバーが「相対」から「固定」に変わるときにちらつきが気になるので、いろいろ試しました。助けてください。

編集：多分私はもっと明確だったはずです。サイドバーは、上部の div を横切ったときにのみ「ちらつき」ます

4

2 に答える 2

13

私は同じ問題を抱えていました。これは、コンピューターの GPU、メモリ、CPU などに基づいてブラウザーが処理するには多すぎる場合に発生するバグのようです...、追加することで修正できました次のコードを固定位置要素 ( transform: translateZ(0);-webkit-transform: translateZ(0);) に変換すると、ブラウザーはハードウェア アクセラレーションを使用してデバイスのグラフィック処理ユニット (GPU) にアクセスし、ピクセルを飛ばすことができます。一方、Web アプリケーションはブラウザーのコンテキストで実行されるため、レンダリングの大部分 (すべてではないにしても) をソフトウェアが実行できるため、遷移の処理能力が低下します。しかし、Web も追いついてきており、現在ではほとんどのブラウザー ベンダーが、特定の CSS ルールによってグラフィカル ハードウェア アクセラレーションを提供しています。

-webkit-transform の使用: translate3d(0,0,0); GPU を起動して CSS トランジションを実行し、よりスムーズに (より高い FPS) にします。

注: translate3d(0,0,0) は、表示内容に関しては何もしません。オブジェクトを x、y、z 軸で 0px 移動します。ハードウェアアクセラレーションを強制するのは単なるテクニックです。

#sidebar {
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
于 2014-09-18T22:54:13.197 に答える