Element offsetTop Eigenschap
❮Het Element-ObjectVoorbeeld
Verkrijg de offsetTop positie van een <div> element:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Definitie en gebruik
De eigenschap offsetTop retourneert de bovenste positie (in pixels) ten opzichte van de bovenkant van het offsetParent-element.
De geretourneerde waarde omvat:
- de bovenste positie en marge van het element
- de bovenste opvulling, schuifbalk en rand van het element offsetParent
Opmerking: Het element offsetParent is de dichtstbijzijnde voorouder met een andere dan statische positie.
Tip: Gebruik de eigenschap offsetLeft om de linkerpositie van een element terug te geven .
Browserondersteuning
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Syntaxis
Retourneer de bovenste offsetpositie:
object.offsetTop
Technische details
Standaardwaarde: | geen standaardwaarde |
---|---|
Winstwaarde: | Een getal, dat de bovenste positie van het element in pixels weergeeft |
DOM-versie: | CSSOM |
Meer voorbeelden
Voorbeeld
Verkrijg de positie van aa <div> element:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Voorbeeld
Maak een plakkerige navigatiebalk:
// 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");
}
}
❮Het Element-Object