web-dev-qa-db-ja.com

'position：fixed'（常に最上部）divを持つ最も簡単なjQueryの方法は何ですか？

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

複雑なものは望まない。巨大なCSSハックは望まない。 jQuery（バージョン1.2.6）を使用するだけで十分な場合は好まれますが、jQuery-UI-coreが必要であれば、それでも問題ありません。

$（ "＃topBar"）。scrollFollow（）;を試しました。 <<.

jquerycsspositioning
36
Timothy Khouri

このHTMLの使用：

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

これは、使用したいJavaScriptです。ウィンドウのスクロールにイベントを添付し、スクロールした限り要素を下に移動します。

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

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

60
nickf

「position：fixed」をサポートするブラウザの場合、javascript（jQuery）を使用して、スクロール時に位置を「fixed」に変更できます。これにより、ここにリストされている$（window）.scroll（function（））ソリューションを使用してスクロールするときのびびりがなくなります。

Ben Nadelは、チュートリアルでこれを示しています。 jQueryを使用した場合によっては固定位置要素の作成

7
Schmoove

綺麗な！あなたの解決策は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");
});
6
Timothy Khouri

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');​
});

もちろん、このアプローチは、実行中にコンテンツを取得/失うスクロール領域に対して変更できます（スクロールバーの追加/削除になります）。

2
Mac Attack

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

必要な変更はスクリプトの追加と呼び出しだけであるbelatedpngのシンプルさを模倣するために書きました。

1
tbranyen

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

0
Tom