jQuery保持Div在屏幕底部

>本指南說明瞭如何使用jQuery在屏幕的頂部或底部保持DIV，以解決標準CSS解決方案不足的情況。儘管CSS提供了基本定位，但JQuery即使在滾動過程中也提供了可保持DIV位置的強大解決方案。

> css and jQuery Solutions >

這是一種CSS方法，以及Internet Explorer兼容性的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');
}

相應的jQuery代碼：

// 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 });
}

高級技術和常見問題

> jQuery插件還可以在滾動過程中保持側邊元件可見度。 讓我們解決一些常見問題：

Q：如何在使用jQuery滾動時將DIV保持在屏幕底部？ 在CSS中使用>。 例如：

>替換為div的ID。 position: fixed

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

問：如何使用jQuery？

組合#yourDiv和

：

>

Q：為什麼不在滾動上更新？ 相對於最近的位置祖先，位置相對於位置。沒有一個，它將使用文檔主體和頁面滾動。使用

進行屏幕固定定位。 offset() height()

Q：如何使用jQuery獲得與視口的底部位置？

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

問：如何使用jQuery？ position: absolute; bottom: 0;使用>方法：

position: absolute該增強指南提供了更清晰的解釋和改進的代碼格式，以提高可讀性。

以上是jQuery保持Div在屏幕底部的詳細內容。更多資訊請關注PHP中文網其他相關文章！