37

私は jQuery に比較的慣れていませんが、これまで見てきたことは気に入っています。私が望むのは、すべてのブラウザで「位置：固定」が機能しているかのように、div（または任意の要素）がページの上部にあることです。

複雑なことはしたくない。大規模な CSS ハックはしたくありません。jQuery (バージョン 1.2.6) を使用するだけで十分だと思いますが、jQuery-UI-core が必要な場合は、それも問題ありません。

$("#topBar").scrollFollow(); を試しました <--しかし、それは遅くなります...何かが本当に固定されているように見えたいです。

4

6 に答える 6

61

この HTML の使用:

<div id="myElement" style="position: absolute">This stays at the top</div>

これは、使用する JavaScript です。ウィンドウのスクロールにイベントをアタッチし、スクロールした分だけ要素を下に移動します。

$(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

以下のコメントで指摘されているように、スクロール イベントにイベントをアタッチすることはお勧めしません。ユーザーがスクロールすると、多くのイベントが発生し、パフォーマンスの問題が発生する可能性があります。オーバーヘッドを削減するために、Ben Alman のdebounce/throttleプラグインと一緒に使用することを検討してください。

于 2008-11-03T05:10:48.817 に答える
7

「位置: 固定」をサポートしているブラウザーでは、スクロール時に javascript (jQuery) を使用して位置を「固定」に変更するだけです。これにより、ここにリストされている $(window).scroll(function()) ソリューションでスクロールするときのジャンプがなくなります。

Ben Nadel は、彼のチュートリアルでこれを示しています 。

于 2010-04-01T12:47:13.337 に答える
7

美しい！あなたの解決策は 99% でした...「this.scrollY」の代わりに、「$(window).scrollTop()」を使用しました。さらに優れているのは、このソリューションが jQuery1.2.6 ライブラリのみを必要とすることです (追加のライブラリは必要ありません)。

私が特にそのバージョンが欲しかった理由は、それが現在 MVC に同梱されているものだからです。

コードは次のとおりです。

$(document).ready(function() {
    $("#topBar").css("position", "absolute");
});

$(window).scroll(function() {
    $("#topBar").css("top", $(window).scrollTop() + "px");
});
于 2008-11-03T11:01:00.373 に答える
2

HTML/CSS アプローチ

多くの JavaScript を必要としないオプションを探している場合 (および、それに伴う高速なスクロール イベント呼び出しなどの問題をすべて必要としないオプション) を探している場合は、ラッパー<div>といくつかのスタイルを追加することで、同じ動作を得ることができます。次のアプローチを使用すると、はるかにスムーズなスクロール (遅れる要素がない) に気付きました。

JSフィドル

HTML

<div id="wrapper">
  <div id="fixed">
    [Fixed Content]
  </div><!-- /fixed -->
  <div id="scroller">
    [Scrolling Content]
  </div><!-- /scroller -->
</div><!-- /wrapper -->

CSS

#wrapper { position: relative; }
#fixed { position: fixed; top: 0; right: 0; }
#scroller { height: 100px; overflow: auto; }

JS

//Compensate for the scrollbar (otherwise #fixed will be positioned over it).
$(function() {
  //Determine the difference in widths between
  //the wrapper and the scroller. This value is
  //the width of the scroll bar (if any).
  var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth;

  //Set the right offset
  $('#fixed').css('right', offset + 'px');​
});

もちろん、このアプローチは、実行時にコンテンツを獲得/喪失するスクロール領域用に変更できます (スクロールバーの追加/削除が発生します)。

于 2012-07-23T21:36:35.250 に答える
1

IE 6 で簡単な解決策をまだ探している人のために、IE 6 の位置を処理するプラグインを作成しました: 問題を修正し、非常に使いやすいです: http://www.fixedie.com/

必要な変更はスクリプトを追加して呼び出すことだけである、belatedpng の単純さを模倣するためにこれを作成しました。

于 2010-09-21T02:43:05.007 に答える
0

プロジェクトで、クライアントが別の div にフローティング ボックスを配置したいので、フローティング ボックスを親にとどめるために、top ではなく margin-top CSS プロパティを使用します。

于 2009-08-16T12:58:50.507 に答える