教程
网站添加一个百分比滚动条
172

网站添加滚动条根据位置显示百分比,这个效果参考joe模板来的,其他网站大同小异。本博客主题我放在了评论底部,噗,顶部没找到合适的位置,随便扔下面了

第一步:
打开模板的 footer.php 文件,复制以下代码,粘贴在文件最后。

<script>
//加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");
</script>

第二步:打开CSS文件 style.css 把下面代码添加到最后。

#percentageCounter {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: -3px;
    height: 3px;
    border-radius: 1.5px;
    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
    transition: width 0.45s;
}

最后一步:
代码放在合适的位置即可。

<div id="percentageCounter"></div>

结语

感谢访问强仔博客,希望本文对你有所帮助!

  • 上一篇
  • 下一篇
  • 添加评论
    评论(4)
    森木志
    森木志

    来到这个网站第一反应就是:导航字体很可爱

    爱强仔
    小赵同学
    小赵同学

    谢谢 学到了

    李锋镝的博客
    李锋镝的博客

    很不戳~~~哈哈哈

    welcome to qiangzai blog