Element offsetTop- Eigenschaft
❮ Das Element-ObjektBeispiel
Holen Sie sich die offsetTop-Position eines <div>-Elements:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Definition und Verwendung
Die offsetTop-Eigenschaft gibt die obere Position (in Pixel) relativ zur Oberkante des offsetParent-Elements zurück.
Der zurückgegebene Wert umfasst:
- die oberste Position und den Rand des Elements
- die obere Polsterung, die Bildlaufleiste und der Rand des offsetParent-Elements
Hinweis: Das offsetParent- Element ist der nächste Vorfahr, der eine andere Position als static hat.
Tipp: Um die linke Position eines Elements zurückzugeben, verwenden Sie die Eigenschaft offsetLeft .
Browser-Unterstützung
| Property | |||||
|---|---|---|---|---|---|
| offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Syntax
Geben Sie die obere Offset-Position zurück:
object.offsetTop
Technische Details
| Standardwert: | kein Standardwert |
|---|---|
| Rückgabewert: | Eine Zahl, die die oberste Position des Elements in Pixel darstellt |
| DOM-Version: | CSSOM |
Mehr Beispiele
Beispiel
Holen Sie sich die Position eines <div> Elements:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Beispiel
Erstellen Sie eine Sticky-Navigationsleiste:
// 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");
}
}
❮ Das Element-Objekt