WordPress 頂部百分比捲動進度

2017.06.06 3,890 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 標籤下的第一行。

WordPress 頂部百分比捲動進度

HTML 程式碼

CSS 程式碼

JS 程式碼

評論

發佈評論