zoukankan      html  css  js  c++  java
  • jquery滚动监听插件waypoints

    waypoints:用于捕获各种滚动事件的插件&&还支持固定元素和无限滚动的功能,功力十分强大。

    Waypoints使用方法:step1:下载waypoints插件(import path)

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

    <script src="waypoints.min.js"></script>

    示例一:

        The simplest case:这个例子会在 #pointElement的顶部 刚碰到用户视角的顶部时出现一个提示,

         callback会在你经过这点设定点触发,不管你是向上滚 动还是向下滚动.

    $('#pointElement').waypoint(function(){  

      notify('Basic example callback triggered.'); //提示内容 

    });

     大部分情况下我们想在   用户向不同方向滚动时展现不同的动作。

                     Waypoints将方向(direction)作为参数传递给回调函数

    $('#pointElement').waypoint(function(direction){  

       notify('Direction example triggered scrolling ' + direction);  

    });   //这里通知将表现为”Direction example triggered scrolling down”或者”Direction example triggered scrolling up”

      If: waypoint在某个位置触发而不是你元素的顶部碰到视角的顶部怎么办?

          waypoint函数提供了第二种自变量?

            (选项对象)其中最有用的是=>offset,即告诉Waypoints要离开窗口顶部多远才触发。offset可以用像素&&百分比来表示。

    $('#pointElement').waypoint(function(){  

          notify('100 pixels from the top');  

    },{ offset: 100 });

       percent表示:

    $('#pointElement').waypoint(function(){  

         notify('25% from the top');  

    },{ offset: '25%' });

      &&:

    $('#pointElement').waypoint(function(){  

          notify('Element bottom hit window top');  

        },{  

          offset: function(){  

            return  $(this).height();  

        }  

    });

  • 相关阅读:
    HDOJ 2102 A计划(bfs)
    HDOJ 1226 超级密码(bfs)
    第一周——Photoshop软件的发展史,并说明其优缺点。
    第一周——Mobile Apps (手机应用)分析
    POJ 3090
    HDU 2824
    UVA 10673
    POJ 1061
    HDU 1358
    POJ 2406
  • 原文地址:https://www.cnblogs.com/ccnNL/p/7707616.html
Copyright © 2011-2022 走看看