给网站顶部添加一个滚动条位置百分比教程

非网站永久会员,不再提供任何技术支持!

网站顶部添加滚动条显示位置百分比教程,基本网站大同小异。网站初衷为的是用户的体验感,在美化的同时,不要丧失理性,带不动的情况下就不要折腾了。

第一步:打开模板的header.php文件,复制以下代码,放在合适的位置。

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

如图所示给网站顶部添加一个滚动条位置百分比教程-蝙蝠猫网- 第6张图片

第二步:打开 footer.php,把JS代码添加进去。JS代码:

//加载显示
$(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");

如下图:给网站顶部添加一个滚动条位置百分比教程-蝙蝠猫网- 第7张图片

第三步:打开公用CSS文件,把下面代码添加到最后就行。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;
}

如下图:给网站顶部添加一个滚动条位置百分比教程-蝙蝠猫网- 第8张图片

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞176赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容