자바스크립트) 스크롤 이벤트를 활용한 배너의 absolute 와 fixed 설정 변경

 

안녕하세요. 찐망고 입니다.

 

오늘은 보그코리아 웹사이트의 마지막 하단 섹션을 클론 해 볼 건데요.

보그 코리아 (Vogue Korea)

 

하단섹션은 왼쪽과 오른쪽으로 나뉘어서

왼쪽 섹션은 grid나 flex를 이용한 리스트섹션, 그리고 오른쪽은 배너모양의 이미지가 한 장 있어요.

스크롤 시 오른쪽 이미지가 고정되어 푸터섹션에 도착할 때까지 움직입니다.

 

보그코리아 하단 섹션

 

 

오른쪽 배너이미지는 처음엔 absoulte였다가 다시 fixed로 변경할 예정이고,

fixed변경 시 좌표값이 부모요소 기준에서 뷰포트 기준으로 변경되므로

그 부분을 염려해서 CSS작업을 해볼 예정이에요

 

왼쪽과 오른쪽을 저렇게 fix클래스 요소로 묶어줄 거고,

마크업요소

 

포인트는 배너크기 right요소를 쓰기가 애매하므로 banner요소 사이즈를 키워줍니다

아래 CSS를 참고해 주세요

.latest-sec .fix {
  position: relative;
  width: 100%;
}
.latest-sec .banner {
  position: absolute;
  width: 100%;
  max-width: 1600px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: right;
}
.banner.active {
  position: fixed;
  top: 20px;
}
.banner.scroll {
  top: auto;
  bottom: 0;
}

 

footer요소가 보일 때쯤 배너요소는 아래에 멈춰있어야 하므로

scroll클래스를 추가하여 CSS를 만들어 줍니다.

 

아래는 JS 코드입니다.

 

JS코드

window.addEventListener("scroll", function() {
    const latestBox = document.querySelector(".latest-box");
    const banner = document.querySelector(".banner");
    const footer = document.querySelector("footer");
	
    // 각 요소의 위치정보
    const latestBoxTop = latestBox.getBoundingClientRect().top;
    const latestBoxBottom = latestBox.getBoundingClientRect().bottom;
    const footerTop = footer.getBoundingClientRect().top;
	
    // footer가 화면에 닿았을 때 배너 클래스 변경
    if(footerTop <= window.innerHeight) {
      banner.classList.add("scroll");
      banner.classList.remove("active");
    } // 최신 박스가 화면에 있을 때 배너 클래스 변경
    else if(latestBoxTop <= 0 && latestBoxBottom > 0) {
      banner.classList.remove("scroll");
      banner.classList.add("active");
    } else {
      banner.classList.remove("active");
    }
});

 

 

 

전체 실행코드를 확인해주세요

 

See the Pen js)스크롤fixed by 찐망고 (@nnwbliyz-the-styleful) on CodePen.