0

要素の上部がビューポートに当たったときにビューポートの上部にくっつく必要がある要素を含むページがあります。これを実現するために、Skrollr というプラグインを使用しています。私が抱えている問題は、要素がビューポートの上部に達し、そのfixed中のコンテンツの配置に切り替わると、点滅またはシフトするように見えることです。これは、少し速くスクロールしているときにのみ発生します。ゆっくりスクロールすると、点滅したりシフトしたりしません。

これは、私が見ている問題の例を含む jsfiddle です。Chrome 以外のブラウザはまだテストしていません。

http://jsfiddle.net/dmcgrew/sYV6L/

更新された jsfiddle.. 緑色のブロックがビューポートの上部をわずかに超えて上にスクロールし、その後下にジャンプする様子を見てください。これは、スクロールが速い場合にのみ発生します.. http://jsfiddle.net/dmcgrew/sYV6L/1/

4

1 に答える 1

0

見た目から、div を 100% 幅に再スケーリングし、ビューポート サイズに再レンダリングしています。の場合position: static、要素は DOM フロー内にあり、その親要素によってバインドされます。ただし、position: fixedその親=>子の関係が壊れ、要素がDOMフローから取り出されます。これにより、ブラウザーは DOM フロー内の要素なしで DOM を強制的に再描画します。

これが、その分のフラッシュとリスケールを取得する理由です。これが問題になる場合は、ある種のトランジション (jQuery アニメーションなど) を使用して簡単にするか、ウィンドウの再描画を強制しない別のプラグインを使用することをお勧めします。

于 2013-11-26T15:05:11.740 に答える