Element offsetTop Eiendom
❮ Die elementvoorwerpVoorbeeld
Kry die offsetTop posisie van 'n <div> element:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Definisie en gebruik
Die offsetTop-eienskap gee die boonste posisie (in pixels) terug relatief tot die bokant van die offsetParent-element.
Die teruggekeerde waarde sluit in:
- die boonste posisie en marge van die element
- die boonste opvulling, rolbalk en rand van die offsetParent-element
Let wel: Die offsetParent- element is die naaste voorouer wat 'n ander posisie as staties het.
Wenk: Om die linkerposisie van 'n element terug te keer, gebruik die offsetLeft- eienskap.
Blaaierondersteuning
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Sintaksis
Keer die boonste offset posisie terug:
object.offsetTop
Tegniese besonderhede
Standaard waarde: | geen verstekwaarde nie |
---|---|
Terugkeerwaarde: | 'n Getal, wat die boonste posisie van die element voorstel, in pixels |
DOM weergawe: | CSSOM |
Meer voorbeelde
Voorbeeld
Kry die posisie van aa <div> element:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Voorbeeld
Skep 'n taai navigasiebalk:
// 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");
}
}
❮ Die elementvoorwerp