1

固定位置のサイド ナビゲーションでコンテンツをスムーズにスクロールできないという問題があります。ユーザーがサイド ナビゲーションの一番上までスクロールすると、固定されます。問題は、固定ナビゲーションの下のコンテンツが、固定ナビゲーションの下をスクロールするのではなく、ページの上部にジャンプすることです。

ここに私のコードがあります: http://jsfiddle.net/grjopa/7GfQ2/1/

このコード例では、固定位置の #sidenav div の下をスムーズにスクロールするには、#sidenav-bottom div が必要です。

これを実現するには、どのコードを追加する必要がありますか?

4

3 に答える 3

3

を適用するposition:fixedと、サイドナビゲーションがドキュメント フローから「持ち上げられ」、下のコンテンツがジャンプしてギャップを埋めます。これを防ぐには、スペースを占有する空の要素を挿入するだけです (そして、に切り替えるときに再度削除しposition:relativeます)。

修正されたデモを参照してください: http://jsfiddle.net/7GfQ2/4/。

私のデモは基本的な概念を示しているだけであり、私は怠け者だったことに注意してください。css プロパティを変更したり、要素を追加/削除したりする前に、DOM からすべての変数を読み取り、それらをキャッシュする必要があります。現在、DOM からの読み取りと DOM の変更を切り替えるため、不必要なページのリフローが (潜在的にパフォーマンスが重要なセクションで) 発生しています。

于 2011-06-07T23:34:56.067 に答える
2

これは機能します：

http://jsfiddle.net/7GfQ2/6/

sidenav が修正されたとき。

$('#sidenav-bottom').css('margin-top',$('#sidenav').height()+20);

sidenav が相対的な場合

$('#sidenav-bottom').css('margin-top','10px');
于 2011-06-07T23:50:12.407 に答える
1

jQueryの使用

jQuery ScrollToFixedを使用して、やりたいことをすばやく実行する方法があります。すべてのクレジットは、SOのこのスレッドの@bigspotteddogに送られます。

于 2012-10-04T01:51:41.700 に答える