องค์ประกอบoffsetTop Property
❮ วัตถุธาตุตัวอย่าง
รับตำแหน่ง offsetTop ของ <div> องค์ประกอบ:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
ความหมายและการใช้งาน
คุณสมบัติ offsetTop ส่งคืนตำแหน่งบนสุด (เป็นพิกเซล) ที่สัมพันธ์กับด้านบนขององค์ประกอบ offsetParent
มูลค่าที่ส่งคืนรวมถึง:
- ตำแหน่งบนสุดและระยะขอบขององค์ประกอบ
- padding ด้านบน แถบเลื่อนและเส้นขอบขององค์ประกอบ offsetParent
หมายเหตุ:องค์ประกอบoffsetParentเป็นบรรพบุรุษที่ใกล้ที่สุดซึ่งมีตำแหน่งอื่นที่ไม่ใช่แบบคงที่
เคล็ดลับ:หากต้องการคืนตำแหน่งด้านซ้ายขององค์ประกอบ ให้ใช้คุณสมบัติoffsetLeft
รองรับเบราว์เซอร์
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
ไวยากรณ์
คืนตำแหน่งออฟเซ็ตบน:
object.offsetTop
รายละเอียดทางเทคนิค
ค่าเริ่มต้น: | ไม่มีค่าเริ่มต้น |
---|---|
คืนมูลค่า: | ตัวเลข แทนตำแหน่งบนสุดขององค์ประกอบ หน่วยเป็นพิกเซล |
รุ่น DOM: | CSSOM |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
รับตำแหน่งของ aa <div> องค์ประกอบ:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
ตัวอย่าง
สร้างแถบการนำทางที่ติดหนึบ:
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
❮ วัตถุธาตุ