jQuery Scroll Follow 跟随浮动插件

评论(0)

Scroll Follow 插件，是 Jquery 的一个控制页面层浮动的轻量级插件，练注释一共不超过300行代码，虽然小却功能强大，对于一些需要在页面加一点绚丽的同学来说，是上上之选。

Scroll Follow插件

是依托于 Jquery 框架的一个插件，主要功能是控制页面某个层随页面滚动而浮动。
因为强大的 Jquery ，所以该插件会兼容 Jquery 兼容的大部分主流浏览器。

最新版下载地址

最新版下载地址： 地址一

使用方法

下载插件源文件
在 Jquery 框架文件被加载后加载本插件。
像如下这样：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.scrollFollow.js"></script>

参数设置

  1. speed 速度毫秒数
  2. easing 不懂
  3. offset 相对于顶部的偏移
  4. container 浮动层的容器 ID，到该容器底部时停止浮动。
  5. killSwitch 浮动层停止位置的层的ID，当浮动层浮动到该容器顶/底部时停止浮动。
  6. onText 开始浮动按钮
  7. offText 停止浮动按钮
  8. relativeTo 相对于顶部浮动还是相对于底部浮动
  9. delay 动画演示毫秒数

一个比较有代表性的参数设置

    <script type="text/javascript">
     $( document ).ready( function () {
       $( '#example' ).scrollFollow( {
        speed: 1000,
        offset: 60,
        killSwitch: 'exampleLink',
        onText: 'Disable Follow',
        offText: 'Enable Follow'
       } );
     } );
    </script>

官方文档及演示地址 Scroll Follow
这里需要明白jquery的选择器，你是否对选择器有所疑惑呢？

总结

jquery 插件的好处是，加载jquery框架和插件后，
你可以像使用jquery内置函数一样去使用这些函数。
所以你可以简略的看一下官方文档，
再看一下本文应该就可以明白这玩意是怎么运作的了。