今天利用空闲时间，研究了一下浏览器滚动条的简单控制，主要是通过jQuery获取滚动条的位置信息，直接上代码
1、当前窗口高度
$(window).height();
2、滚动条已滚动高度
$(window).scrollTop();
3、结合jQuery来实时获取滚动条滚动距离信息
1 $(window).on('scroll',()=>{ 2 let $fixedheader = $('#topface'); // fixed容器 3 // console.log(fixedheader); 4 var wintop=$(window).scrollTop(); // 已滚动卷去的高度 5 //console.log(wintop); 6 let winHeight = $(window).height(); // 可视窗口的高度 7 //console.log(winHeight); 8 // 卷去一个可视窗口高度后执行 9 /* if (wintop - winHeight > 0) { 10 // fixedheader.hide(); 11 $fixedheader.addClass("showtopface"); 12 } else { 13 // fixedheader.show(); 14 $fixedheader.removeClass("showtopface"); 15 } */ 16 // 当滚动条离顶部100像素时的条件判断和执行动作 17 if(wintop>100){ 18 // fixedheader.hide(); 19 $fixedheader.addClass("showtopface"); 20 } else { 21 // fixedheader.show(); 22 $fixedheader.removeClass("showtopface"); 23 } 24 25 })
通过上边代码，在做前端滚动条的控制时，或者滚动条滚动到离顶部指定位置高度时触发某些动作。我这边是当滚动到离顶部100时，给html标签增加样式showtopface，否则移除html标签样式showtopface
