jQuery simpan div di bawah skrin

Panduan ini menerangkan bagaimana untuk menyimpan div tetap di bahagian atas atau bawah skrin menggunakan jQuery, menangani situasi di mana penyelesaian CSS standard jatuh pendek. Walaupun CSS menawarkan kedudukan asas, jQuery menyediakan penyelesaian yang mantap untuk mengekalkan kedudukan div walaupun semasa menatal.

penyelesaian CSS dan jQuery

Berikut adalah pendekatan CSS, bersama -sama dengan sandaran jQuery untuk keserasian Internet Explorer:

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

kod jQuery yang sepadan:

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

Teknik Lanjutan dan Soalan Lazim

Plugin jQuery juga boleh mengekalkan penglihatan elemen sidebar semasa menatal. Mari kita jelaskan beberapa soalan biasa:

Q: Bagaimana untuk menyimpan div di bahagian bawah skrin semasa menatal menggunakan jQuery?

Gunakan

dalam CSS. Contohnya: position: fixed

Ganti

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

dengan id div anda.

#yourDiv

Q: Bagaimana mencari kedudukan bawah div dengan jQuery?

Gabungkan

dan

: offset() height()

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

q: Mengapa tidak

kemas kini pada tatal? position: absolute; bottom: 0;

kedudukan relatif kepada nenek moyang yang terdekat. Tanpa satu, ia menggunakan badan dokumen dan skrol dengan halaman. Gunakan

untuk kedudukan tetap skrin. position: absolute position: fixed

Q: Bagaimana untuk mendapatkan kedudukan bawah div relatif terhadap viewport menggunakan jQuery?

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

Q: Bagaimana membuat tongkat div ke bahagian bawah div lain menggunakan jQuery?

Gunakan kaedah

:

append()

Panduan yang dipertingkatkan ini memberikan penjelasan yang lebih jelas dan pemformatan kod yang lebih baik untuk kebolehbacaan yang lebih baik.

$("#parentDiv").append($("#childDiv"));

Atas ialah kandungan terperinci jQuery simpan div di bawah skrin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!