帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery监听上下滚动方向和位置插件

帝国模板之家 2020-12-11 网页特效 评论

插件介绍

jQuery滚动插件,检测滚动方向(向上和向下)和滚动位置,并相应地向特定的指示符元素添加CSS类。

使用方法

1. 在页面中加载jQuery库和滚动插件文件。

<script src="jquery.slim.min.js"></script>
<script src="jquery.scroll-direction.js"></script>

2. 初始化插件。

$.scrollDirection.init({
  
})

3.设置顶部和底部偏移量。

$.scrollDirection.init({
  topOffset: 0,
  bottomOffset: 0,
  atBottomIsAtMiddle: true
})

4. 滚动时将自定义CSS类添加到indicator元素(默认:body)。

$.scrollDirection.init({
  indicator: true,
  indicatorElement: $("body"),
  scrollUpClass: "scroll-up",
  scrollDownClass: "scroll-down",
  scrollAtTopClass: "scroll-top",
  scrollAtMiddleClass: "scroll-middle",
  scrollAtBottomClass: "scroll-bottom",
})

5. 当滚动到一个额外的指示符元素时,向它添加自定义CSS类。

$.scrollDirection.init({
  extraIndicators: {
    "element": $("#extra-element"), 
    "class": "custom-class",
  }
})

6.根据当前滚动方向和位置触发的可用事件。

$(window).on("scrollDirection", function () {
  // on load, resize, or scroll
});

$(window).on("scrollUp", function () {
  // on scroll up
});

$(window).on("scrollDown", function () {
  // on scroll down
});

$(window).on("scrollAtTop", function () {
  // when reaching the top
});

$(window).on("scrollAtMiddle", function () {
  // when reaching the middle zone
});

$(window).on("scrollAtBottom", function () {
  // when reaching the bottom
});

7.可用属性。

if($.scrollDirection.isScrollUp){
  // is scrolling up
}

if($.scrollDirection.isScrollDown){
  // is scrolling down
}

if($.scrollDirection.isScrollAtTop){
  // is reaching the top
}

if($.scrollDirection.isScrollAtMiddle){
  // is reaching the middle zone
}

if($.scrollDirection.isScrollAtBottom){
  // is reaching the bottom
}
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言