对于滚动条的进一步解释:
对网页的滚动条监听的时候:
js中添加事件:
window.onscroll=function(){
找到div的竖轴滚动条并返回值,可以console.log看到返回值,
var gd = window.scrollY;
中间可以写自己想操作的部分,
如果 滚动条的高度大于等于1000的时候执行什么方法;在方法里找到想要改变的id并修改值。
if(gd>=1000){
}
}
window.onscroll=function(){
var gd = window.scrollY;
if(gd>=100){
var pf = document.getElementById("kjdh2");
pf.style.position = "fixed";
pf.style.top = "0px";
pf.style.display = "block";
}
};
获取div的滚动条时,
在页面加载完成时,添加一个定时器 (setInterval(bb,80);)
这个bb是变量,80是每0.08秒执行一次,有这两个值就可以在下面执行方法运行bb这个变量;
function bb(){
找到这个div,并在后面 .scrollTop,就可以获取到div的高度;每0.08秒获取一次
var divh = document.getElementById("da").scrollTop;
if(divh>1000){
同上,在方法里也可以直接判断,并在判断中修改想要修改的属性
}
}
在想要添加定时器,并添加动画时,就要在判断后找到想要的元素,并修改他的属性。
在找属性值的时候,变量名 “点” style.marginTop.substr(0,3); 前面的0是从第几位开始,3是截取3位,这个值找到的时候是数组值,并不是一个整数值,所以找的时候可以给他取整
parseInt( );也就是parseInt(变量名 “点” style.marginTop.substr(0,3));
divh是获取到的滚动条高度,在434到1249这个范围内就会执行 if(divh >= 434 && divh<=1249 ){ // 定义变量得到想要改变的元素值的属性,这个是找到元素的前三位,如果这个值是100,取3就会得到100,如果是-100取到的就是-100,包含符号在内的值。 括号中0是从第几位开始,3是会截取到第几位。 var lb1 = lb.style.marginTop.substr(0,3); //添加一个定时器并给一个变量 var ds = setInterval( function(){ 一个判断属性,满足条件的情况下一直执行,这个是元素的上边距不小于等于4的时候就一直执行 if(lb1>=4){ //每运行一次都会给获取到的元素上边距-1个px,并赋值给元素的上边距 lb.style.marginTop = +(lb1-1)+"px"; //每次lb1都减一,就是获取到的值和上面的值一样,满足条件,到达想要的属性就停止。 lb1--; // 满足条件是停止 }else{ clearInterval(ds); } 每0.02秒执行一次 },20); }