1976s

제가 필요해서 만들다 보니 아 저장해 두어야겠다고 생각에 이렇게 글 적습니다. 초보라서 외우질 못합니다. ^^

 

스크롤을 올릴 때 콘텐츠가 나타나는 효과, 스크롤 내릴 때 사라지는 효과

 

우선 CSS로 스크롤 시 보여질 header의 스타일을 정의합니다. 이후 JavaScript로 스크롤 이벤트를 처리하여 스크롤이 일정 위치 이상 내려갈 경우 header를 보여주거나 숨기는 효과를 구현

 

<div class="content">
  <header class="header visible"> <!-- 처음 페이지 로드시 보여주어야 되기 때문에 visible 추가함 -->
    <!-- header content -->
  </header>
  <!-- content body -->
</div>

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000; /* header의 배경색 지정 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
  transition: transform 0.3s ease-in-out; /* transform에 대한 전환 효과 */
  transform: translateY(-100%); /* header를 숨김 */
}

.header.visible {
  transform: translateY(0); /* 스크롤이 일정 위치 이상 내려가면 header를 보여줌 */
}

const header = document.querySelector('.header');
const content = document.querySelector('.content');
const headerHeight = header.offsetHeight; // header의 높이
let prevScrollpos = window.pageYOffset;

window.addEventListener('scroll', () => { // 스크롤 이벤트를 처리
  const currentScrollpos = window.pageYOffset;
  const isVisible = header.classList.contains('visible');
  const isScrollingDown = currentScrollpos > prevScrollpos;

  if (isScrollingDown && isVisible) { // 스크롤이 내려갈 경우, isScrollingDown 변수가 true가 되고, isVisible 변수가 true일 경우 header를 숨깁니다.
    header.classList.remove('visible');
  } else if (!isScrollingDown && !isVisible && currentScrollpos > headerHeight) {
    // 스크롤이 올라갈 경우, isScrollingDown 변수가 false, isVisible 변수가 false, 스크롤이 header의 높이 이상일 경우 header를 보여줍니다.
    header.classList.add('visible');
  }	else if (currentScrollpos <= headerHeight && !isVisible) { // 스크롤이 header 높이보다 작은 위치에 있을 경우 header를 보여줌
    header.classList.add('visible');
  }

  prevScrollpos = currentScrollpos;
});

위의 코드에서, header와 content 변수는 각각 HTML의 .header와 .content 클래스를 가진 요소를 선택합니다. headerHeight 변수는 header의 높이를 저장합니다.

window 객체의 scroll 이벤트를 이용하여 스크롤 이벤트를 처리합니다.

 

• 스크롤이 내려갈 경우 - isScrollingDown 변수가 true가 되고, isVisible 변수가 true일 경우 header를 숨깁니다.
• 스크롤이 올라갈 경우 - isScrollingDown 변수가 false가 되고, isVisible 변수가 false이며, 스크롤이 header의 높이 이상일 경우 header를 보여줍니다.
• 페이지로딩 & 최상위 - 스크롤이 header 높이보다 작은 위치에 있을 경우 header를 보여줍니다.

 

 

마치며

어느날 이런 기능을 구현하고 싶어서 찾다가 우연히 짜깁기로 만들었는 것입니다. 위에서 적었는 것과 같이 저장용이며 더 좋은 코드나 수정 및 충고등 댓글 부탁드립니다.