jQuery滑动固定插件scrollfix

所属分类:UI-滚动

 41486  414  查看评论 (4)
分享到微信朋友圈
X
jQuery滑动固定插件scrollfix ie兼容6

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!


相关插件-滚动

自定义滚动条

自定义滚动条,实现滚轮滚动内容
  滚动
 59945  415

向下滚动加载动画特效插件AOS

向下滚动网页加载动画特效插件AOS
  滚动
 37252  435

jQuery锚点带动跳转页面代码

jQuery锚点带动跳转页面代码
  滚动
 43329  369

jQuery仿京东楼层滑动侧边栏高亮(原创)

jQuery模仿京东侧边栏点击滑动到该楼层,同时侧边栏随着页面滚动对应导航高亮。
  滚动
 38912  408

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ali12333 0
    2019/7/12 11:28:49
    感谢,这个解决了我一个大问题!刚才找到了一个js叫Portamento,也不错,但是一个页面内无法多次调用。 回复
    -果冻-- 0
    2019/1/26 11:42:15
    body有padding时,滚动会出错 回复
    我是吴彦祖 0
    2016/8/23 17:08:02
    很不错 漂亮  大气 回复
    DIV 0
    2016/8/23 13:08:58
    让我想起来苹果官网iphone介绍图片 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复