html的body中加一条线,body上面有一条提示线.html

body上面有一条提示线

*{margin: 0;padding: 0;}

.line{

position:fixed;

width:0%;

height:2px;

left:0px;

top:0px;

background-color:mediumvioletred;

}

.sp-fixed{padding: 10px;position: fixed;color: brown;}

鼠标移动到这里来滚动看看~~~

$(function(){

var htmlHeight=$('html').height();//页面实际高度

var screenHeight=$(window).height();//屏显高度

var scrollHeight=htmlHeight-screenHeight;//滚轮可滚动总长度

$(window).scroll(function() {

//滚轮实时滚动距离

var scrollTop=$(window).scrollTop();

var w=scrollTop/scrollHeight*100;

$('.line').css({'width':w+'%'});

});

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史