PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > Jquery教程 > 正文

    一款非常不错的jQuery滚动监听插件Waypoints.js插件

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:咱们在做项目的时候,经常遇到滚动滑条的时候,就能触发各种各样的动态效果,比如导航栏浮动,图片浮动等效果,推荐你一款用于捕获各种滚动...
    咱们在做项目的时候,经常遇到滚动滑条的时候,就能触发各种各样的动态效果,比如导航栏浮动,图片浮动等效果,推荐你一款用于捕获各种滚动事件的插件—Waypoints,同时Waypoints还支持固定元素和无限滚动的功能,功力十分强大。

    演示Demo:
    1.http://imakewebthings.com/jquery-waypoints/#get-started
    2.固定元素http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/
    3.无线滚动http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/

     

    下载:
    1.官网:http://imakewebthings.com/jquery-waypoints/
    2.GiHub:https://github.com/imakewebthings/jquery-waypoints

    使用方法:
    首先需要包含一个jQery文件,然后包含下载的插件
     

    1. <script src="/path/to/jquery.min.js"></script>   
    2. <script src="/path/to/waypoints.min.js"></script>  

    下面调用.waypoint,并传递到一个函数中
     

    1. $('#bcty365').waypoint(function() {   
    2.   alert('B5教程网 www.bcty365.com'); 
    3. });   

    这个例子会在#bcty365的顶部刚碰到用户视角的顶部时出现一个提示,callback会在你经过这点设定点触发,不管你是向上滚动还是向下滚动. 大部分情况下我们想在用户向不同方向滚动时展现不同的动作。Waypoints将方向作为参数传递给回调函数
     

    1. $('#example-direction').waypoint(function(direction) {   
    2.   notify('Direction example triggered scrolling ' + direction);   
    3. });  


    这里通知将表现为”Direction example triggered scrolling down”或者”Direction example triggered scrolling up”.

     

    要是你是想让waypoint在某个位置触发而不是你元素的顶部碰到视角的顶部怎么办?waypoint函数提供了第二种自变量—选项对象。其中最有用的是–offset,即告诉Waypoints要离开窗口顶部多远才触发。offset可以用像素来表示。
     

    1. $('#example-offset-pixels').waypoint(function() {   
    2.   notify('100 pixels from the top');   
    3. }, { offset: 100 });  

    或者用比例来表示
     

    1. $('#example-offset-percent').waypoint(function() {   
    2.  notify('25% from the top');   
    3. }, { offset: '25%' });   

    或者是一个函数,这个函数需要返回一个数字
     

    1. $('#example-offset-function').waypoint(function() {   
    2.   notify('Element bottom hit window top');   
    3. }, {   
    4.   offset: function() {   
    5.     return -$(this).height();   
    6.   }   
    7. });  


     

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-47-2583-1.html
    相关热词搜索: jQuery滚动监听插件
    上一篇:jquery json 操作