顶部滚动条(预览页面剩余长度)

html 代码

<div id="load"></div>
css 代码
#load {
    background-color: #2299dd;
    height: 2px;
    width: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
}
js 代码
$(function() {
    function scroll_fn() {
        document_height = $(document).height();
        scroll_so_far = $(window).scrollTop();
        window_height = $(window).height();
        max_scroll = document_height - window_height;
        scroll_percentage = scroll_so_far / (max_scroll / 100);
        $('#load').width(scroll_percentage + '%')
    }
    $(window).scroll(function() {
        scroll_fn()
    });
    $(window).resize(function() {
        scroll_fn()
    })
});

更多效果请查看本站。
参考自 友人C

返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论