"

为你的网站添加页面下拉横向剩余图示

  • 内容
  • 相关

一、将下列的js代码添加到你网站的公共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);
    $('#junyao').width(scroll_percentage + '%');
}
$(window).scroll(function() {
scroll_fn();
});
$(window).resize(function() {
scroll_fn();
});
});

二、将下列的引入代码加入到你主页的顶部适当位置

<div id="junyao"></div>

三、将下列的css代码加入到你网站的公共css文件之中

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

四、完成以上三步后,强制刷新你的首页,即可看到效果。

 您阅读这篇文章共花了: 

标签:

标题:为你的网站添加页面下拉横向剩余图示

版权:转载请带上版权原创为《陌路

侵权:本站资源来自互联网侵权联系删除

链接:https://av.ci/19.html

文章:上一篇:文章阅读时间统计代码 下一篇:忆流年代挂系统源码

为你的网站添加页面下拉横向剩余图示

发表评论

电子邮件地址不会被公开。 必填项已用*标注

00:00 / 00:00
顺序播放