jQueryはDivを画面の下部に保ちます

このガイドは、jQueryを使用して画面の上部または下部にDivを固定する方法を説明し、標準のCSSソリューションが不足している状況に対処します。 CSSは基本的なポジショニングを提供していますが、jQueryはスクロール中でもDIV位置を維持するための堅牢なソリューションを提供します。

cssおよびjqueryソリューション これがCSSアプローチと、インターネットエクスプローラーの互換性のためのjQueryフォールバックです：

対応するjQueryコード：

.bottom {
  position: fixed; /* Preferred method */
  position: absolute; /* IE fallback */
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
}

/* IE-specific fix */
.fixie {
  left: expression((-jsrp_related.offsetWidth + (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');
  top: expression((-jsrp_related.offsetHeight + (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px');
}

// Note:  A height property MUST be set for this to work correctly.
if ($.browser.msie) {
  div.css({ position: "absolute", width: jslide_width, right: 0, height: 100 });
  div.addClass('fixie');
} else {
  div.css({ position: "fixed", width: jslide_width, right: 0, height: 100 });
}

高度なテクニックとFAQ

jQueryプラグインは、スクロール中にサイドバー要素の可視性を維持することもできます。 いくつかの一般的な質問に対処しましょう：

Q：jQueryを使用してスクロール中にスクリーンボトムにdivを保持する方法？

cssでを使用します。 たとえば、

position: fixed divのIDに置き換えます。

$("#yourDiv").css("position", "fixed");
$("#yourDiv").css("bottom", "0");

Q：jQueryでdivの底部位置を見つける方法？#yourDiv ​​

と：を組み合わせます

offset()Q：スクロールで更新されないのはなぜですか？ height()

最も近い位置にある祖先に対する位置。 1つでは、ドキュメント本体を使用し、ページでスクロールします。画面固定の位置決めに

var bottom = $("#yourDiv").offset().top + $("#yourDiv").height();

を使用してください。

position: absolute; bottom: 0;Q：jQueryを使用してビューポートに対してdivのボトム位置を取得する方法？

Q：jqueryを使用して別のdivの底にdivを貼り付ける方法？ position: absolute position: fixedメソッドを使用してください：

この強化されたガイドは、より明確な説明と改善されたコードフォーマットを提供し、読みやすくなります。

以上がjQueryはDivを画面の下部に保ちますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。