근심을 잊는 한 장

WordPress 상단 백분율 스크롤 로딩 진행률 표시줄 구현

3,912 0

얼마 전 저는 《WordPress 상단 로딩 진행률 표시줄 코드》라는 글을 작성한 적이 있습니다. 웹사이트 로딩 시간을 표시하는 용도였으며, 이번 기능과 비슷합니다.

오늘 여러분께 소개할 것은 가로 방향의 진행률 표시줄입니다. 웹페이지를 아래로 스크롤하면 진행률 표시줄이 점점 길어집니다. 또한 스크롤바 색상을 사용자 지정할 수도 있습니다. 현재 이 사이트에도 해당 코드가 적용되어 있으며, 이 사이트의 페이지에서 효과를 직접 확인할 수 있습니다. 아래는 코드 공유입니다.

HTML 코드

HTML
<div id="load"></div>

CSS 코드

CSS
#load {
    background-color: #ff6651;
    height: 3px;
    width: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
}

JS 코드

JavaScript
$(function() {
    function scroll_fn() {
        let document_height = $(document).height();
        let scroll_so_far = $(window).scrollTop();
        let window_height = $(window).height();
        let max_scroll = document_height - window_height;
        let scroll_percentage = scroll_so_far / (max_scroll / 100);
        $('#load').width(scroll_percentage + '%');
    }
    $(window).scroll(function() {
        scroll_fn();
    });
    $(window).resize(function() {
        scroll_fn();
    });
});

주의: HTML 코드는 body 태그 아래의 첫 번째 줄에 배치해야 합니다.

댓글

(0)

아직 댓글이 없습니다

댓글 작성