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();  

        }  

    });

  • 相关阅读:
    Linux OpenSSH后门的加入与防范
    Oracle APEX 4.2安装和配置
    springboot 配置jsp支持
    java 多线程 yield方法的意义
    java多线程状态转换
    Jquery_artDialog对话框弹出
    ThinkPHP框架学习摘要
    js弹窗对象不能通过全局对象移到外部函数中执行
    关于rawurldecode PHP自动解码
    td高度不随内容变化display:block;display:block;display:block;display:block;display:block;
  • 原文地址:https://www.cnblogs.com/ccnNL/p/7707616.html
Copyright © 2011-2022 走看看