아스트라 테마: 스크롤 시 헤더 고정하기

Last Updated: 2023년 10월 08일 | 댓글 남기기

워드프레스 아스트라 테마의 경우 유료 버전에서 헤더를 고정하는 옵션이 제공됩니다. 이 글에서는 Astra 테마 무료 버전이 적용된 워드프레스 사이트에서 사용자가 아래로 스크롤하면 헤더를 숨기고, 위로 스크롤하면 헤더를 표시하는 방법에 대하여 살펴보겠습니다.

아스트라(Astra) 테마에서 헤더를 항상 고정하기

항상 헤더를 고정하고 싶은 경우에는 다음과 같은 간단한 CSS 코드를 사용할 수 있습니다.

/* 
    Description: Make header sticky for WordPress Astra Theme
    Explanation: This CSS code block is designed to make the header of 
                 a website using the WordPress Astra Theme sticky/fixed 
                 at the top of the page, ensuring it remains visible while 
                 scrolling on desktop screens with a minimum width of 921px. 
                 Additional padding is added to the site content to 
                 prevent it from being obscured by the sticky header.
*/

@media (min-width: 921px) {
    .site-header {
        z-index: 99;
        position: fixed;
        width: 100%;
        top: 0;
    }

    .site-content {
        padding-top: 160px; /* Adjust according to your header's actual height */
    }
}

site-content의 padding-top 값은 실제 헤더 높이값으로 대체합니다. 위의 코드를 외모 » 사용자 정의하기 » 추가 CSS 섹션에 추가하거나 차일드 테마 내의 스타일시트(style.css) 파일에 추가합니다.

위의 코드는 데스크톱에서만 적용됩니다. 모바일에서도 적용하려면 모바일용 미디어쿼리를 별도로 추가해야 합니다. 상기 코드에서 미디어쿼리 부분을 제거하면 PC와 데스크톱에서 헤더 아래의 여백이 달라서 모바일에서는 어색하게 보일 수 있습니다. 모바일용 코드에서는 여백을 적절히 조정하도록 합니다.

아스트라 테마에서 스크롤 시 헤더 고정하기

사용자가 아래로 500px 정도 스크롤하면 헤더를 상단에 고정하고 싶은 경우 다음과 같은 CSS 코드와 자바스크립트를 사용할 수 있습니다. 스크롤에 상관 없이 항상 고정하고 싶은 경우에는 상기의 "아스트라 테마에서 헤더를 항상 고정하기" 부분의 코드를 사용하시기 바랍니다.

CSS 코드:

.site-header {
    z-index: 99;
    width: 100%;
    transition: top 2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-header.fixed {
    position: fixed;
    top: 0;
}

자바스크립트 코드:

<script>
const header = document.querySelector('.site-header');
const content = document.querySelector('.site-content');
const hideAfter = 500; // The scroll position to trigger the header fix

let lastScrollTop = 0;
let isHeaderFixed = false;

window.addEventListener('scroll', () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    if (scrollTop > hideAfter && !isHeaderFixed) {
        header.style.top = '-100%'; // Set initial position out of view
        header.classList.add('fixed');
        // Animate header sliding down
        setTimeout(() => {
            header.style.top = '0';
        }, 0);
        isHeaderFixed = true;
    } else if (scrollTop <= hideAfter && isHeaderFixed) {
        // Animate header sliding up
        header.style.top = '-100%';
        // Remove fixed class after animation completes
        setTimeout(() => {
            header.classList.remove('fixed');
            isHeaderFixed = false;
        }, 500); // should match transition duration in CSS
    }
    
    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}, false);
</script>

상기 코드는 모바일과 데스크톱 모두에서 작동합니다.

CSS 코드는 마찬가지로 외모 » 사용자 정의하기 » 추가 CSS 섹션에 추가합니다. JavaScript 코드는 "워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법"을 참고하여 로드할 수 있습니다. 또는 간단히 WPCode와 같은 플러그인을 사용하여 푸터 섹션에 코드를 추가할 수도 있습니다.

플러그인을 사용하여 헤더 고정하기

간단한 방법으로는 Sticky Menu & Sticky Header 플러그인을 사용하여 헤더를 쉽게 고정할 수 있습니다. 자세한 방법은 "워드프레스 메뉴와 헤더를 고정하자 - Sticky Menu & Sticky Header 플러그인" 글을 참고해보세요.

마치며

이상으로 아스트라 테마에서 헤더를 고정하는 방법에 대하여 살펴보았습니다. 무료 버전을 사용하는 경우 상기의 방법으로 헤더를 고정할 수 있습니다.

뉴스페이퍼 등 일부 유료 테마에서는 헤더를 고정하는 옵션이 제공됩니다. GeneratePress 테마도 유료 버전에서는 헤더를 고정하는 옵션이 제공되며, 특히 Sticky Navigation 설정 페이지에서 Hide when scrolling down 옵션을 체크하면 사용자가 화면을 아래로 스크롤 할 때 내비게이션이 숨겨지게 되고, 화면을 위로 스크롤하면 내비게이션이 상단에 고정되어 표시됩니다. (예전의 미디엄 블로그의 헤더 작동 방식과 동일합니다.)

아스트라 테마: 스크롤 시 헤더 고정하기 2

GeneratePress 무료 버전에서 헤더를 고정하는 방법에 대해서는 시간이 될 때 별도의 글에서 정리해보겠습니다. 마찬가지로 Sticky Menu & Sticky Header와 같은 플러그인을 사용하면 쉽게 원하는 요소를 고정할 수 있습니다.

참고


댓글 남기기

Leave a Comment