Divi 테마에서 스크롤할 때 헤더가 줄어들지 않도록 하는 방법

Last Updated: 2020년 11월 14일 7개 댓글
무료 전자책 애드센스 웨비나

Elegant Themes의 Divi 테마에서 페이지를 아래로 스크롤하면 헤더가 살짝 줄어드는 효과가 적용됩니다. 이런 효과는 다른 테마에서도 흔히 적용되는 것을 목격합니다.

이렇게 마우스를 아래로 스크롤할 때 줄어드는 효과(Shrink)를 없애려면 다음 jQuery 코드를 사용할 수 있습니다.

<script>
(function(){
// Override the addClass to prevent fixed header class from being added
var addclass = jQuery.fn.addClass;
jQuery.fn.addClass = function(){
var result = addclass.apply(this, arguments);
jQuery('#main-header').removeClass('et-fixed-header');
return result;
}
})();
jQuery(function($){
$('#main-header').removeClass('et-fixed-header');
});
</script>

위의 제이쿼리 스크립트를 Divi > Themes Options > Integration 탭의 Add code to the < head > of your blog 섹션에 추가하면 됩니다. 자세한 방법은 "Divi 테마에서 javascript / jQuery 삽입하기" 글을 참고해보시기 바랍니다.

참고로 Divi 테마에서 마우스를 스크롤할 때 헤더가 고정되지 않도록 하려면 Divi > Themes Options > General 탭에서 Fixed Navigation Bar를 비활성화하면 됩니다.

Elegant Themes의 Divi 테마

위의 그림과 같이 Enable 버튼을 Disable로 바꾸고 설정을 저장하면 페이지를 아래로 스크롤하더라도 헤더가 고정되지 않습니다.

참고:

7 개 댓글

Leave a Comment

  1. 하나 여쭤볼게 있습니다. 현재 Fixed Navigation Bar를 활성화시켜서 헤더를 고정?시켰습니다. 데스크탑에서 볼 때는 헤더가 따라오는데, 모바일에서는 헤더가 스크롤에 따라오지가 않네요. 모바일에서도 헤더가 따라올 수 있도록 설정을 어떻게 해야하나요?

    응답

    • 안녕하세요?

      이 부분은 인식하지 못하고 있었는데, 실제로 테스트해보니 모바일에서는 헤더가 고정되지 않네요.

      다음 코드를 사용해보시기 바랍니다.

      /* Divi 테마에서 모바일 메뉴 고정 */
      @media (max-width: 980px) {
      .et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
      position: fixed;
      }
      }

      응답