Mikilio wa offsetTop wa Element wa HTML DOM

Mifano na matumizi

offsetTop Mikilio wa kina wa juu wa kina cha kikuu ni mikilio ya juu ya kina cha kikuu (kwa umbo wa pixel). Mtafiti hauwezi kubadilika.

Matokeo wa matokeo inayotumika kwenye:

  • Mwili wa juu wa kina na kina ya juu
  • Mandhari ya juu ya kina cha kikuu, kichwani na jinga

Tazama pia:Mafunzo ya muundo wa kifamizi cha CSS

offsetParent

Makampuni yote ya kikoa cha kikubwa yanakubadilisha mikilio ya kuelekea kikoa cha siri kwa mabaki wa kina wa maelezo:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Mabaki wa kuelekea kikoa cha siri ni mabaki ya kina wa maelezo ambao haukubaki kwa sababu ya kina.

Ikiwa kina haukuna mabaki wa kuelekea kikoa cha siri kwa haraka.

tazama pia:

mikilio wa offsetLeft

mikilio wa offsetWidth

mikilio wa offsetHeight

Kipendekezo cha offsetParent

Kipendekezo cha kipimo cha kina

Kipendekezo cha kipimo cha kina

Kipendekezo cha kipimo cha kima

Kipendekezo cha kipimo cha kina

Mifano

Mifano 1

Kupata eneo la offsetTop la 'myDIV':

const element = document.getElementById("myDIV");
let pos = element.offsetTop;

Tafadhali tukiongezea kufikia mifano

Mifano 2

Kupata eneo la 'myDIV':

const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;

Tafadhali tukiongezea kufikia mifano

Mifano 3

Kuanzisha barua ya nia ya kina:

// Kupata barua ya nia
const navbar = document.getElementById("navbar");
// Kupata eneo la kusoma la barua ya nia
const sticky = navbar.offsetTop;
// Kama inafikia viwango vya kusoma, kuingiza kiwango cha 'sticky' kwenye barua ya nia. Kama inakwenda mazingira ya kusoma, kutoweka kiwango cha 'sticky'.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Tafadhali tukiongezea kufikia mifano

Muundo wa lugha

Kuzingatia eneo la juu: top offset

element.offsetTop

Matokeo ya kuzingatia

Mwili Maelezo
Namba Muundo wa kituo, kwa kilomita cha pixeli.

Mawasiliano ya vifaa vya kueleza

Wote wa vifaa vya kueleza hawakubaliwa element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Mwamkono Mwamkono Mwamkono Mwamkono Mwamkono Mwamkono