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;
      }
      }

      응답