ວິທີການທີ່ສ້າງ: ປະກອບອັບຕັດຄົນ

ບົດຮຽນວິທີການທີ່ພິຈະລະນາ CSS ທີ່ສ້າງປະກອບອັບຕັດຄົນ.

ຕື່ມຄວາມຄິດຂອງເຈົ້າຕົວເອງ

ເຫັນຫຍັງ:ບໍ່ມີການສະໜັບສະໜູນສຳລັບ Internet Explorer ຫຼື Edge 15 ແລະເກົ່ານີ້.

ປະກອບອັບຕັດຄົນ

ຕົວຢ່າງ

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

ຕື່ມຄວາມຄິດຂອງເຈົ້າຕົວເອງ

ປະກອບອັບຕັດທີ່ໃຊ້ position: sticky; ຈະວາງອັບຕັດອີງຕາມຄຳສັ່ງທີ່ຄົງທຽບຄວາມສະໝອງຂອງຜູ້ນຳການ.

ປະກອບອັບຕັດຄົນທີ່ sticky ທີ່ປ່ຽນກັນລະບົບວາງອັບຕັດທີ່ຄົງທຽບຄວາມສະໝອງ. ກ່ອນທີ່ຈະກ້າວເຖິງຄຳສັ່ງອັບຕັດທີ່ກຳນົດໄວ້, ມັນຈະວາງອັບຕັດທີ່ຄົງ, ພຽງແຕ່ຈະ“ຈອງ”ຢູ່ບ່ອນດັ່ງກ່າວ (ຄື position:fixed).

ເຫັນຫຍັງ:ບໍ່ມີການສະໜັບສະໜູນການວາງອັບຕັດຄົນຂອງ Internet Explorer, Edge 15 ແລະເກົ່ານີ້. Safari ຕ້ອງມີລຸ່ມ -webkit - (ເບິ່ງຄວາມທີ່ຫຼັງ). ເພື່ອສະໜັບສະໜູນການວາງອັບຕັດຄົນຂອງ sticky, ຕ້ອງມີຄຳສັ່ງຢ່າງໜ້ອຍປະເພດແປວງຫົວຂອງ top, right, bottom ຫຼື left.

相关页面

教程:CSS 定位