JQ动态监听滚动条位置

JQ动态监听滚动条位置并执行指定命令

例如：给div添加类或移除类

我一般用来改变头部的样式。

第一步：引入jq文件

<script src="style/js/jquery.min.js"></script>

第二步：设置变量等于滚动条当前位置，并做出判断

       $(window).scroll(function(){
            var st = $(window).scrollTop();
            if(st>80){
              $('#header').addClass('active')
            }else if(st<80){
              $('#header').removeClass('active')
            }
        });

详解：

scrollTop() 方法设置或返回被选元素的垂直滚动条位置。

提示：当滚动条位于最顶部时，位置是 0。

当用于返回位置时：
该方法返回第一个匹配元素的滚动条的垂直位置。

当用于设置位置时：
该方法设置所有匹配元素的滚动条的垂直位置。

语法：

返回垂直滚动条位置：

$(selector).scrollTop()

设置垂直滚动条位置：

$(selector).scrollTop(position)

知识拓展：

1、$(window).height()和$(document).height()的区别

jQuery(window).height()代表了当前可见区域的大小，也就是你浏览器所能看到的页面的那部分高度。

jQuery(document).height()则代表了整个文档的高度。

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。

2、

addClass()

向被选元素添加一个或多个类名

removeClass()

从被选元素移除一个或多个类

 

此文章仅供于学习交流使用，如有更好的方法请在评论区留言~