Elemen offsetTop Property
Objek ElemenContoh
Dapatkan posisi offsetTop dari elemen <div>:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Definisi dan Penggunaan
Properti offsetTop mengembalikan posisi teratas (dalam piksel) relatif terhadap bagian atas elemen offsetParent.
Nilai yang dikembalikan termasuk:
- posisi teratas, dan margin elemen
- padding atas, scrollbar, dan batas elemen offsetParent
Catatan: Elemen offsetParent adalah ancestor terdekat yang memiliki posisi selain static.
Tip: Untuk mengembalikan posisi kiri elemen, gunakan properti offsetLeft .
Dukungan Peramban
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Sintaksis
Kembalikan posisi offset atas:
object.offsetTop
Detail Teknis
Nilai Bawaan: | tidak ada nilai default |
---|---|
Nilai Kembali: | Angka, mewakili posisi teratas elemen, dalam piksel |
Versi DOM: | CSSOM |
Lebih Banyak Contoh
Contoh
Dapatkan posisi elemen <div> aa:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Contoh
Buat bilah navigasi lengket:
// 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");
}
}
Objek Elemen