워드프레스 Divi 메뉴가 미디엄처럼 작동하도록 만들기
미디엄(Medium)에서 글을 읽을 때 아래로 스크롤할 때에는 상단의 메뉴(헤더) 부분이 표시되지 않다가 마우스를 위로 스크롤하면 메뉴 부분이 표시됩니다. 미디엄처럼 Divi 테마에서 아래로 스크롤할 때 메뉴를 표시하고 위로 스크롤할 때 메뉴를 숨기고 싶은 경우 이 글에서 제시하는 코드를 활용할 수 있습니다.
워드프레스 Divi 메뉴가 미디엄처럼 작동하도록 만들기
미디엄 글을 하나 보면서 테스트해보면 어떻게 작동하는지 보다 잘 이해할 것입니다. 가령 이 미디엄 글에서 마우스를 아래로 스크롤하면 헤더가 표시되지 않지만 글 중간에 위로 이동하기 위해 마우스를 위로 스크롤하면 메뉴 부분이 표시됩니다. ( 이제 더 이상 미디엄에서 이와 같이 작동하지 않습니다.)
Medium처럼 위아래 스크롤에 따라 헤더 숨기기/표시하기에서 미디엄처럼 구현하는 방법이 설명되어 있습니다. Elegant Themes의 Divi 테마(현재 이 블로그에 사용되고 있음)에서도 동일한 기능을 구현할 수 있습니다. 다음과 같은 방법으로 Divi에서 아래로 스크롤하면 헤더를 숨기고 위로 스크롤하면 헤더를 표시되도록 할 수 있습니다.
먼저 Divi > 테마 옵션 > 일반으로 이동하여 맨 아래의 사용자 맞춤 CSS에 다음 CSS 코드를 추가합니다.
/**
* 헤더 스타일 - Header Styles
*/
#main-header {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
#main-header.invisible {
opacity: 0;
top: -1000% !important;
}
.et-fixed-header#main-header {
opacity: 0;
}
#main-header.detached {
position: fixed !important;
top: 0;
opacity: 1 !important;
}
그리고 다음 jQuery 코드를 추가하도록 합니다. Divi 테마에서 자바스크립트/jQuery를 삽입하는 방법은 이 글을 참고해보시기 바랍니다.
<script type="text/javascript">
$(document).ready(function() {
/**
* Menu Hide
*/
var previousScroll = 0, // previous scroll position, 이전 스크롤 위치
menuOffset = 60, // height of menu (once scroll passed it, menu is hidden), 메뉴 높이
detachPoint = 650, // point of detach (after scroll passed it, menu is fixed), 분리 위치
hideShowOffset = 6; // scrolling value after which triggers hide/show menu
/**
* on scroll hide/show menu, 스크롤 시 메뉴 숨기기/표시
*/
$(window).scroll(function() {
if (!$('#main-header').hasClass('expanded')) {
var currentScroll = $(this).scrollTop(), // gets current scroll position
scrollDifference = Math.abs(currentScroll - previousScroll); // calculates how fast user is scrolling
// if scrolled past menu
if (currentScroll > menuOffset) {
// if scrolled past detach point add class to fix menu
if (currentScroll > detachPoint) {
if (!$('#main-header').hasClass('detached'))
$('#main-header').addClass('detached');
}
// if scrolling faster than hideShowOffset hide/show menu
if (scrollDifference >= hideShowOffset) {
if (currentScroll > previousScroll) {
// scrolling down; hide menu
if (!$('#main-header').hasClass('invisible'))
$('#main-header').addClass('invisible');
} else {
// scrolling up; show menu
if ($('#main-header').hasClass('invisible'))
$('#main-header').removeClass('invisible');
}
}
} else {
// only remove “detached” class if user is at the top of document (menu jump fix)
if (currentScroll <= 0){
$('#main-header').removeClass();
}
}
// if user is at the bottom of document show menu, 사용자가 문서의 맨 아래에 도달하면 메뉴 표시
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
$('#main-header').removeClass('invisible');
}
// replace previous scroll position with new one, 이전 스크롤 위치를 새로운 위치로 바꿈
previousScroll = currentScroll;
}
})
});
</script>
// Source: Adam Haworth
실제 테스트해보니 잘 작동합니다. 이처럼 아래로 스크롤할 때에는 메뉴를 숨기고 위로 스크롤할 때에는 메뉴를 표시하면 글 읽기에 더욱 집중하는 데 도움이 될 것 같습니다.
마치며
워드프레스 Divi 테마에서 마우스를 아래로 스크롤할 때 메뉴가 숨김 상태가 되고 위로 마우스를 스크롤하면 메뉴가 다시 표시되도록 하는 방법에 대하여 살펴보았습니다.
워드프레스에서는 뉴스페이퍼와 GeneratePress와 같은 일부 테마에서 이와 같이 작동하도록 하는 옵션에 제공됩니다.
