jQuery判断页面滚动条距离顶端位置

今天利用空闲时间，研究了一下浏览器滚动条的简单控制，主要是通过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

 

来源：https://www.cnblogs.com/926803/p/11941840.html