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内置函数一样去使用这些函数。
所以你可以简略的看一下官方文档,
再看一下本文应该就可以明白这玩意是怎么运作的了。