粘性滚动插件

虽然position:fixed本身能解决相对窗口锁定位置,但是更多的特效它做不了。所以有开发者开发了sticky类插件。

基础插件

  • 实现:
  1. 在页面滚动的某些局部范围内让div相对文档流固定,在另一些局部范围内让div相对窗口固定。
  • 没实现:
  1. 随意设定div相对于窗口的初始位置。所以,这种插件需要由使用者自己想办法设定div相对于窗口的初始位置。
  2. 粘滞动画。

另一种基础插件

  • 实现:
  1. 随意设定div相对于窗口的初始位置。所以,这种插件需要由使用者自己想办法设定div相对于窗口的初始位置。
  2. 粘滞动画。
  • 没实现:
  1. 在页面滚动的某些局部范围内让div相对文档流固定,在另一些局部范围内让div相对窗口固定。

全功能插件:功能全实现。

基础插件

Sticky

github:https://github.com/garand/sticky

Sticky-kit

github:https://github.com/leafo/sticky-kit

stickUp

参考:http://www.bootcss.com/p/stickup/

由于三个插件的功能完全相同,所以直接拿第一个举例。

官方的范例代码经过简单加工,如下:




只需按需求调整一个参数topSpacing即可。

另一种基础插件

佚名插件

这个插件是我同事从前找的,然而他似乎搞错了插件的名称,所以暂时叫佚名插件。不依赖jQuery。使用方法见js文件内。
http://hebei.sinaimg.cn/hb_2011_v2/js/collection/floatDiv.js

全功能插件

stickyfloat

github:https://github.com/yairEO/stickyfloat

你可能感兴趣的:(粘性滚动插件)