고정 요소가 작동을 멈출 때 JavaScript를 사용하여 CSS 오버플로를 해제하는 방법

고정 사이드바, 머리글 또는 바닥글 CTA가 작동을 멈춘 경우 테마가 상위 요소(일반적으로 div)에 CSS overflow property을 추가했을 가능성이 큽니다.

친숙하게 들리나요? 그런 다음 계속 읽으십시오 ;-)

이 자습서에서는 JavaScript를 사용하여 그 나쁜 소년을 설정 해제합니다.

아래 단계에서는 WordPress를 예로 사용합니다. 그러나 동일한 개념이 다른 웹사이트 플랫폼이나 프레임워크에도 적용됩니다.

1단계: 잘못된 요소 찾기

개발 도구를 열고 CSS 패널의 검색 필터에 overflow를 입력합니다.


overflow 속성이 설정된 요소의 HTML ID 특성을 기록해 둡니다.

이 경우 boxed-wrapper 입니다.

2단계: JavaScript를 작성하여 오버플로 속성을 설정 해제합니다.

좋아하는 코드 편집기를 엽니다. 아래 코드를 복사하여 편집기에 붙여넣고 .js 파일 확장자를 사용하여 저장합니다.

(function () {
    if (!document.URL.includes("floating-toc-sidebar-test")) return;
    let element = document.getElementById("boxed-wrapper");
    if (!element) return;
    element.style.overflow = 'unset'; /* To fix any position: sticky further down the DOM. */
})();        

floating-toc-sidebar-test를 페이지 슬러그로 변경합니다. 수정이 필요한 페이지에서만 이 코드를 실행하기를 원하기 때문입니다.

1단계에서 기록한 HTML IDboxed-wrapper로 변경합니다. 참고: 잘못된 HTML 요소에 ID가 없으면 해당 요소 하나만 가져오는 CSS 선택기를 사용해야 합니다.

파일을 다시 저장하십시오.

3단계: JavaScript 코드 설치

2가지 옵션이 있습니다.

옵션 1: 플러그인 없이 설치하기

좋아하는 코드 편집기를 다시 엽니다. 아래 코드를 복사하여 붙여넣고 .php 파일 확장자를 사용하여 저장합니다.

/* Inline script printed out in the footer to fix sticky elements. */
function sticky_fix_add_script_wp_footer() {
    ?>
        <script>
            (function () {
                if (!document.URL.includes("floating-toc-sidebar-test")) return;
                let element = document.getElementById("boxed-wrapper");
                if (!element) return;
                element.style.overflow = 'unset'; /* To fix any position: sticky further down the DOM. */
            })();        
        </script>
    <?php
}
add_action('wp_footer', 'sticky_fix_add_script_wp_footer');

<script></script> 태그 사이의 함수를 2단계에서 작성한 함수로 바꿉니다.

PHP 파일을 저장합니다.

PHP 파일의 내용을 복사하여 하위 테마의 파일functions.php에 붙여넣습니다.

옵션 2: 머리글 및 바닥글 삽입 플러그인을 사용하여 설치

WordPress 관리 영역에 로그인합니다. 설정 > 머리글 및 바닥글 삽입으로 이동합니다.

하단의 바닥글 코드 스니펫의 스크립트 상자에 다음 코드를 입력합니다.

<script>
</script>

그런 다음 <script></script> 태그 사이에 2단계에서 작성한 JavaScript 코드를 복사하여 붙여넣습니다.

지금까지 가지고 있어야 할 것은 다음과 같습니다.



저장을 누르십시오.

그리고 끝났습니다!

페이지를 테스트하십시오.

같은 문제에 부딪힌 다른 사람들과 지식을 공유하는 것을 잊지 마십시오.

즐기다!