首页 > Web开发 > 详细

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

时间:2019-11-27 14:54:03      阅读:128      评论:0      收藏:0      [点我收藏+]

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

 

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

原文:https://www.cnblogs.com/926803/p/11941840.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!