插件文件在/文件 scrollfix.js

用法:

var fix = $(".fix"), fixtop = $(".fix-top"), fixStartTop = $(".fix-startTop"), fixStartBottom = $(".fix-startBottom"), fixbottom = $(".fix-bottom"), fixfooter = $(".fix-footer");
fix.scrollFix(); //第一种
fixtop.scrollFix({distanceTop:20}); //第二种
fixStartTop.scrollFix({startTop:"#startTop"}); //第三种
fixStartBottom.scrollFix({startBottom:"#startBottom"}); //第四种
fixbottom.scrollFix({endPos:300});//第五种
fixfooter.scrollFix({endPos:"#fixFooter"}); //第六种
fixbottom.scrollFix({distanceTop:20,startTop:"#startTop",endPos:300}); //第七种
fixfooter.scrollFix({distanceTop:10, startBottom:"#startBottom", endPos:"#fixFooter"}) //第八种

参数详解

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

推荐:整合的在底部、侧栏和底部同时固定的演示

第一种:默认滚动到这里开始固定

第二种:滚动到距离这里顶部20像素开始固定

第三种:滚动到一个标签#startTop的头部开始固

第四种:滚动到一个标签#startBottom的末端开始固定

第五种:滚动停在底部300像素

第六种:滚动停在底部#fixFooter的位置

第七种:混合模式:元素距离顶部20像素,滚动到某个标签开始滚动,最后停靠在底部300像素位置

第八种:混合模式:距离顶部10像素,到某个标签的底部开始浮动,停靠在某个标签的位置

scrollfix.js插件:滚动固定在某个位置的更多相关文章

  1. js滚动条滚动到某个元素位置

    scrollTo(0,document.getElementById('xxx').offset().top);

  2. 选择控件js插件和使用方法

    记录一下 选择控件js插件 /* * 滚动控件,包含地址选择.时间选择.自定义单选 */ //js_inputbox input 输入框 //js_pickviewselect 下拉单项选择 //js ...

  3. ScrollFix.js:一个 iOS5 溢出滚动的(有限)修复方案

    Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touc ...

  4. JS鼠标滚动插件scrollpath使用介绍

    JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...

  5. 前端小插件之手写js循环滚动特效

    很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...

  6. html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  7. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  9. [JS]手动实现一个横屏滚动公告js插件

    前言 工作中要用到.在github上找的大部分都是竖屏滚动没办法只能自己手动写. 本来只是想随便实现一下的,结果一时兴起把它弄成了一个简单的小插件,开了个github仓库(希望路过点个星) JS横屏滚 ...

随机推荐

  1. 解决 The word is not correctly spelled问题(转载)

    转自:http://jyao.iteye.com/blog/1261555 The word is not correctly spelled 此问题是eclipse校验单词拼写造成,如果出在配置文件 ...

  2. window切换Java版本原因

    查找Path环境变量的变量指向的目录,有一个Oracle目录存放着几个 java,javac等可执行文件,删除这个路径或文件就可以执行你指定的JavaHome目录拉 详情参考: https://blo ...

  3. poj 3130 How I Mathematician Wonder What You Are! 【半平面交】

    求多边形的核,直接把所有边求半平面交判断有无即可 #include<iostream> #include<cstdio> #include<algorithm> # ...

  4. Luogu P1396 营救【最小生成树/二分答案/最短路】 By celur925

    题目描述 “咚咚咚……”“查水表!”原来是查水表来了,现在哪里找这么热心上门的查表员啊!小明感动的热泪盈眶,开起了门…… 妈妈下班回家,街坊邻居说小明被一群陌生人强行押上了警车!妈妈丰富的经验告诉她小 ...

  5. bzoj1303[CQOI2008]中位数图 / 乱搞

    题目描述 给出1~n的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是b.中位数是指把所有元素从小到大排列后,位于中间的数. 输入输出格式 输入格式: 第一行为两个正整数n和b,第二行为1 ...

  6. Python unittest 基本框架解析(2)

    下面例子,是一般测试框架的基本结构 框架知识点包括:实例化被测试模块类.装载测试用例.测试套件打包.保存测试输出结果.生成测试报告等 测试情况包括   :跳过某个case.执行成功.执行失败 #待测试 ...

  7. 无法生成DH密钥对Could not generate DH keypair

      Source from here Add this library to classpath(following is maven project) <dependency> < ...

  8. Wannafly挑战赛10:A题:小H和迷宫

    题目描述       小H陷入了一个迷宫中,迷宫里有一个可怕的怪兽,血量有N点,小H有三瓶魔法药水,分别可以使怪兽损失a%.b%.c%的血量(之后怪兽的血量会向下取整),小H想合理地运用这三瓶药水,使 ...

  9. 动态链接库(DLL) 分类: c/c++ 2015-01-04 23:30 423人阅读 评论(0) 收藏

    动态链接库:我们经常把常用的代码制作成一个可执行模块供其他可执行文件调用,这样的模块称为链接库,分为动态链接库和静态链接库. 对于静态链接库,LIB包含具体实现代码且会被包含进EXE中,导致文件过大, ...

  10. VS2010中使用命令行参数 分类: c/c++ 2014-07-11 22:24 634人阅读 评论(0) 收藏

    在Linux下编程习惯了使用命令行参数,故使用VS2010时也尝试了一下. 新建项目,c++编写程序如下: #include<iostream> #include<fstream&g ...