Öğe offsetTop Özellik
❮ Öğe NesnesiÖrnek
Bir <div> öğesinin offsetTop konumunu alın:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Tanım ve Kullanım
offsetTop özelliği, offsetParent öğesinin üstüne göre üst konumu (piksel olarak) döndürür.
Döndürülen değer şunları içerir:
- elemanın üst konumu ve kenar boşluğu
- offsetParent öğesinin üst dolgusu, kaydırma çubuğu ve sınırı
Not: offsetParent öğesi, statik dışında bir konuma sahip en yakın üst öğedir.
İpucu: Bir öğenin sol konumunu döndürmek için offsetLeft özelliğini kullanın.
Tarayıcı Desteği
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Sözdizimi
Üst ofset konumunu döndür:
object.offsetTop
Teknik detaylar
Varsayılan değer: | varsayılan değer yok |
---|---|
Geri dönüş değeri: | Piksel olarak öğenin üst konumunu temsil eden bir Sayı |
DOM Sürümü: | CSSOM |
Daha fazla örnek
Örnek
aa <div> öğesinin konumunu alın:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Örnek
Yapışkan bir gezinme çubuğu oluşturun:
// 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");
}
}
❮ Öğe Nesnesi