요소 offsetTop 속성
❮ 요소 개체예시
<div> 요소의 offsetTop 위치를 가져옵니다.
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
정의 및 사용
offsetTop 속성은 offsetParent 요소의 상단에 상대적인 상단 위치(픽셀 단위)를 반환합니다.
반환된 값에는 다음이 포함됩니다.
- 요소의 상단 위치 및 여백
- offsetParent 요소의 상단 패딩, 스크롤바 및 테두리
참고: offsetParent 요소는 static 이 아닌 위치를 가진 가장 가까운 조상입니다.
팁: 요소의 왼쪽 위치를 반환하려면 offsetLeft 속성을 사용하십시오.
브라우저 지원
| Property | |||||
|---|---|---|---|---|---|
| offsetTop | Yes | 8.0 | Yes | Yes | Yes |
통사론
상단 오프셋 위치를 반환합니다.
object.offsetTop
기술적 세부 사항
| 기본값: | 기본값 없음 |
|---|---|
| 반환 값: | 요소의 상단 위치를 픽셀 단위로 나타내는 숫자 |
| DOM 버전: | CSSOM |
더 많은 예
예시
<div> 요소의 위치 가져오기:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
예시
고정 탐색 모음 만들기:
// 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");
}
}
❮ 요소 개체