고정된 헤더와 컨텐츠 가려짐 해결

zoomkoding님이 배포해주신 개츠비 블로그 테마를 조금씩 커스텀해서 사용하고 있다. 깔끔한 원본 테마 덕분에 따로 손이 갈 일은 별로 없지만 그래도 업그레이드 되면 좋을 것 같은 부분이 보여 직접 리모델링을 한다. 블로그 커스텀의 많은 부분은 devhac 블로그를 참고하였다. hakyung님께 감사드립니다!!

이번에 수정한 부분은 헤더부분이다. 스크롤을 내려가면서 글을 읽다보면 빠르게 위로 올라가고 싶거나 네비게이션 메뉴바를 선택하고 싶을 때가 있어 원래는 Top 버튼을 만들려고 했다. 그런데 Top 버튼보다는 상단에 고정되어 언제든지 접근할 수 있는 헤더가 더 실용적일 것 같아 고정된 헤더를 만드는 것으로 방향을 바꾸었다.

이 글에서는 리액트로 고정된 헤더를 만드는 과정과, css로 고정된 헤더의 고질적인 한계인 컨텐츠 가려짐 문제를 해결하는 내용을 소개한다.

원리

고정된 헤더를 만드는 원리는 다음과 같다.

스크롤이 되었는지 여부(true, false)를 변수로 저장해둔다. 최초에는 false로 저장한다.
1에서 지정한 변수에 스크롤이 안되어있는 상태(false)가 저장되어 있고, 현재 윈도우에서 스크롤이 감지되면 헤더를 상단에 고정시킨다. 이후 1에서 지정한 변수에는 스크롤이 되어있음(true)을 저장한다.
만약 1에서 지정한 변수에 스크롤이 되어있는 상태(true)가 저장되어 있고, 현재 윈도우에서 스크롤이 감지되지 않으면 헤더를 고정하지 않는다. 이후 1에서 지정한 변수에는 스크롤이 안되어있음(false)을 저장한다.

구현

위에서 설명한 내용을 리액트 라이브러리를 이용하여 단계별로 구현한다.

1. 스크롤 여부 변수 지정

JavaScript

import React, { useState, useEffect } from 'react';

const [scrolled, setScrolled] = useState(false);

useState 함수를 이용하여 현재 스크롤 여부 변수(scrolled)를 false로 초기화하고 이를 업데이트하는 함수(scrolled)를 선언한다.

2. 현재 스크롤 상태에 따라 스크롤 여부 변수 재지정

JavaScript

import React, { useState, useEffect } from 'react';

useEffect(() => {
    const handleScroll = () => {
      if (!scrolled && window.pageYOffset > 30) {
        setScrolled(true);
      } else if (scrolled && window.pageYOffset <= 30) {
        setScrolled(false);
      }
    };
    
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [scrolled]);

  // return 생략
  ...
};

useEffect 함수를 이용한다. 이때 첫번째 인자는 스크롤 여부 변수와 헤더 고정을 재지정하는 함수를, 두번째 인자는 useEffect 함수를 실행할지 말지 결정하기 위한 조건 변수를 지정한다.

첫번째 인자 - handleScroll함수와 clean-up 부분

handleScroll함수

스크롤 감지를 위해서는 화면 상단으로부터 스크롤한 거리를 구하는 pageYOffset 속성을 이용하여 이 거리 값이 30을 넘는지 안넘는지를 확인함

if문을 통해 화면 상단으로부터 스크롤이 이루어지고 있는 경우를 판별

else if문을 통해 화면 중간부분에서 상단으로 올라가는 스크롤을 하는 경우를 판별

clean-up

스크롤 이벤트 발생 시 handleScroll함수를 호출

useEffect 함수를 계속해서 재실행해야하므로 이전에 발생했던 이벤트 리스너를 제거하고 정리함

두번째 인자 - [scrolled] 변수

계속해서 재실행되는 useEffect 함수는 성능을 저하시킬 수 있음

이를 막기위해 인자로 [scrolled] 변수를 넘겨주고 렌더링 이전과 이후의 [scrolled] 값을 비교하여 동일할 경우 useEffect 함수를 건너뛰도록 함

3. 헤더를 고정시키는 효과 나타내기

클래스 명에 따라 style을 다르게 설정해주면 스크롤 여부에 따라 헤더를 고정시키는 효과를 나타낼 수 있다.

HTML

<header className={scrolled ? "page-header-wrapper scrolled" : "page-header-wrapper"}>
    < !-- html 구현 생략 -- >
    ...
</header>

CSS

.page-header-wrapper {
  position: fixed;
  display: flex;
  justify-content: center;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1;
  @include content-horizontal-padding;

  // 스크롤 이벤트 시
  &.scrolled {
    box-shadow: 1px 2px 18px rgba(0,0,0,.1);

    .page-header {
      height: 75px;
      transition: height 0.3s ease;
    }
  }

  // 스크롤 이벤트 없을 시
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    @include content-max-width;
  }

  // css 생략
  ...
}

삼항 조건 연산자를 이용하여 scrolled 변수의 참 거짓 여부에 따른 <header> 태그의 클래스명을 지정해준다.

스크롤 이벤트 발생 시 헤더의 길이를 줄이는 효과를 주고 그림자 효과를 넣었다.

전체 코드

src/components/page-header/index.js

import { Link } from 'gatsby';
import PropTypes from 'prop-types';
import React, { useState, useEffect } from 'react';

import headerTitleImg from '../../assets/capo-profile-img.png'

import './style.scss';

const PageHeader = ({ siteTitle }) => {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (!scrolled && window.pageYOffset > 30) {
        setScrolled(true);
      } else if (scrolled && window.pageYOffset <= 30) {
        setScrolled(false);
      }
    };
    
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [scrolled]);

  return (
    <header className={scrolled ? "page-header-wrapper scrolled" : "page-header-wrapper"}>
      <div className="page-header">
        <div className="front-section">
          <Link className="link" to="/">
            <div className="front-section-img-title-wrapper">
              <img className="front-section-img" src={headerTitleImg} />
              <div className="front-section-title">
                {siteTitle}
              </div>
            </div>
          </Link>
        </div>
        <div className="trailing-section">
          <Link className="link" to="/about">
            about
          </Link>
          <Link className="link" to="/posts">
            posts
          </Link>
        </div>
      </div>
    </header>
  );
};

PageHeader.propTypes = {
  siteTitle: PropTypes.string,
};

PageHeader.defaultProps = {
  siteTitle: ``,
};

export default PageHeader;

고정된 헤더에 가려진 컨텐츠 구출하기

”??? : 헤더가 예쁘게 올라가면 뭐해,,, 내용이 안보이는데;;”

이럴때는 헤더 바로 다음에 위치한 컨텐츠가 헤더 높이만큼 내려오게 하면 된다. 단, 블로그 페이지 중 헤더 다음에 위치한 모든 컨텐츠 태그에 효과를 적용해야 한다.

해당 블로그는 포스트의 헤더, about 페이지, index 페이지, table-of-contents(목차)의 스타일 부분에 padding-top: 100px;을 적용하여 해결했다.

고정된 헤더에 가려진 앵커(제목 태그) 구출하기

아직 끝난게 아니다 ^^;;; 모든 컨텐츠가 잘 보이는가 했더니 table-of-contents에서 앵커로 연결된 <h1> ~ <h6> 태그로 이동 시 해당 태그 부분이 정확히 화면 상단에 딱 맞게 이동되는 바람에 애매하게 제목이 보이지 않는 문제가 남아있었다.

하지만 하늘 아래 새로운 것은 없다고 역시 스택오버플로우에 이런 문제를 호소하는 사람이 있었다. 해결법은 제목 태그에 ::before 가상 요소를 추가하고 그 길이를 고정된 헤더의 길이만큼으로 지정하여 눈속임을 하는 것이다.

CSS

h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
  display: block;
  content: " ";
  height: 90px;
  margin-top: -90px;
  visibility: hidden;
}