中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

Jquery集合

浏览声明

UI

分类插件

模态框

滚动轮播

拖拉排序

多选框

滚动条

Loading

移动端

提示框

功能性插件

瀑布流

  • CSS3立方体小照片
  • D3.js logo可视化库 D3.js
  • 图片处理

    banner特效

    jQuery滑动固定插件scrollfix

    阅读 (2228)

    ie兼容6
    插件描述:jQuery滑动固定插件scrollfix滚动到某个位置固定起来

    jquery插件scrollfix:滑动到某个位置浮动起来

    该jQuery插件主要解决滚动过程中固定某个元素,并支持到达某个位置后停止在那里随页面向上滚动,当滚回来时,重新固定起来。兼容IE6。

    使用场景

    当我们滚动网页浏览时,我们想将侧栏的某个广告或者精选文章固定在那里,这样用户滚动下来时侧栏就不是空白的,增加曝光率和点击率,增加收入和流量。

    当然有时候设计网页时,侧栏也会用到一边是固定浮动在那里,一边是滚动的。这种情况我们也同样是可以用这个插件。

    参数详解

    参数名字参数值参数作用
    startTopnull开始固定的jquery对象的顶部
    startBottomnull开始固定的jquery对象末端,两个参数都设置的话,默认后面参数生效
    distanceTop0/null数值,距离顶部的高度,可以为高度或者jquery对象
    endPosnull/0距离底部的高度,可以为高度或者jquery对象
    bottom-1默认不使用位置为bottom的值,当设置为0,将会停在窗口底端
    zIndex0当没有设置这个值时,将默认使用元素的css z-index值
    baseClassName'scrollfixed'当元素开始固定时给它添加一个class,你可以设置为你喜欢的类名。


    插件参数有4个,下面我将说明一下如何使用这个浮动固定插件

    第一个:startTop:null

    这个是定义什么时候指定的元素开始浮动,如果没有设置,则默认滚动指定元素位置开始浮动。如有指定,可以为startTop:"#startTop",当元素到达这个标签的顶部时,则浮动出来。

    第二个:startBottom:null

    这个同样是定义元素什么时候开始浮动,跟上面不能冲突,只能指定一个。两个如果都指定,则默认后面这个参数为准。这个是当元素滚动到startBottom:"#startBottom"的末端时开始浮动。

    第三个:distanceTop:0

    距离顶部的高度,默认为0。

    第四个:endPos:0

    距离顶部的高度为多少时停止浮动,并固定在相应位置,可以指定jquery对象,如:endPos:"#footer",也可以是数字:endPos:300.

    第五个:bottom:-1

    默认不使用位置为bottom的值,当设置为0,将会停在窗口底端

    第六个:zIndex:0

    当没有设置这个值时,将默认使用元素的css z-index值

    第七个:baseClassName:scrollfixed

    当元素开始固定时给它添加一个class,你可以设置为你喜欢的类名。

    使用方法

    $("#fix").scrollFix({startTop:"#startTop",distanceTop:20,endPos:"#footer"});

    具体你可以下载我里面提供的六个静态文件,给出了六种可能性。希望你会喜欢上这个插件。enjoy it!



    关闭
    程序员人生