Vlastnost offsetTop prvku
❮ Objekt prvkuPříklad
Získejte pozici offsetTop prvku <div>:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Definice a použití
Vlastnost offsetTop vrací horní pozici (v pixelech) vzhledem k horní části prvku offsetParent.
Vrácená hodnota zahrnuje:
- horní pozice a okraj prvku
- horní výplň, posuvník a okraj prvku offsetParent
Poznámka: Element offsetParent je nejbližší předek, který má pozici jinou než statickou.
Tip: Chcete-li vrátit levou pozici prvku, použijte vlastnost offsetLeft .
Podpora prohlížeče
| Property | |||||
|---|---|---|---|---|---|
| offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Syntax
Vraťte pozici horního odsazení:
object.offsetTop
Technické údaje
| Výchozí hodnota: | žádná výchozí hodnota |
|---|---|
| Návratová hodnota: | Číslo představující horní pozici prvku v pixelech |
| Verze DOM: | CSSOM |
Další příklady
Příklad
Získejte pozici prvku aa <div>:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Příklad
Vytvořte lepivý navigační panel:
// 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");
}
}
❮ Objekt prvku