[JS] Airbnb 클론코딩 with HTML/CSS - day5

jiseong·2021년 9월 10일
0

T I Learned

목록 보기
63/291

offsetTop 값의 기준

해당 요소가 일정 부분에 도달하면 fixed된 것을 풀어주는 것을 구현해야 한다.

요소가 fixed로 되어있어 offsetTop은 항상 고정값을 출력한다.

그렇기 때문에 window.scrollY 값에 해당 요소의 높이와 offsetTop(여기서는 viewport에서 부터 요소의 상단까지의 거리) 값을 더하여 파란요소의 offsetBottom와 비교하여 하단에 도달했는지 알 수 있었다.

function checkMaxScroll() {

    const offsetBottom = descriptionWrap.offsetTop + descriptionWrap.offsetHeight;

    if(offsetBottom < window.scrollY + feeWrap.offsetHeight + feeWrap.offsetTop){
        console.log('here');
    }
}

여기서 가장 주의해야 할 점은 element.offsetTop값이다.

📌 element.offsetTop는 offsetParent를 기준으로 element의 윗 부분까지의 거리
offsetParent는 다음과 같다.

offsetParent기준은 아래 3가지 중 하나에 속한다.

  • CSS position 속성 absolute나 relative, fixed, sticky인 가장 가까운 조상 요소
  • <td><th>, 혹은 <table>
  • <body>

👍 position: sticky

몇시간동안 특정 div 범위 내에서만 요소가 fixed 되도록 하려고 끙끙거렸는데 position: sticky 이 속성 하나만 적어주니까 동일하게 원하는대로 동작을 한다......

position: sticky을 선언해준 요소는 평소에는 position: static과 같이 행동하다가 스크롤 위치가 특정 임계점 안에 존재시 position: fixed의 행동으로 변화하게 된다.

아래 코드를 보면 stickyfixed의 차이점을 알 수 있을 것이다.

position : sticky 사용 시 top, left와 같은 위치값을 반드시 작성해줘야 sticky 속성을 적용할 수 있다.

abosolute relative static fixed만 알고 있었지 sticky은 처음들어보았는데 정말 유용한 속성인 것 같다.

0개의 댓글