scrollfix.js插件:滚动固定在某个位置
插件文件在/文件 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,你可以设置为你喜欢的类名。 |
第一种:默认滚动到这里开始固定
第四种:滚动到一个标签#startBottom的末端开始固定
第五种:滚动停在底部300像素
第七种:混合模式:元素距离顶部20像素,滚动到某个标签开始滚动,最后停靠在底部300像素位置
第八种:混合模式:距离顶部10像素,到某个标签的底部开始浮动,停靠在某个标签的位置
scrollfix.js插件:滚动固定在某个位置的更多相关文章
- js滚动条滚动到某个元素位置
scrollTo(0,document.getElementById('xxx').offset().top);
- 选择控件js插件和使用方法
记录一下 选择控件js插件 /* * 滚动控件,包含地址选择.时间选择.自定义单选 */ //js_inputbox input 输入框 //js_pickviewselect 下拉单项选择 //js ...
- ScrollFix.js:一个 iOS5 溢出滚动的(有限)修复方案
Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touc ...
- JS鼠标滚动插件scrollpath使用介绍
JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...
- 前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 整屏滚动效果 jquery.fullPage.js插件+CSS3实现
最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...
- [JS]手动实现一个横屏滚动公告js插件
前言 工作中要用到.在github上找的大部分都是竖屏滚动没办法只能自己手动写. 本来只是想随便实现一下的,结果一时兴起把它弄成了一个简单的小插件,开了个github仓库(希望路过点个星) JS横屏滚 ...
随机推荐
- js bind es5函数柯里化
绑定函数 bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.常见的错误就像上面的例子一样,将方法从对象中拿出来,然后调用,并且希望this指向原来的对象. 如果不做特 ...
- 转载:百为STM32开发板教程之十一——NOR FLASH
转载:http://bbs.21ic.com/icview-586199-1-1.html 百为STM32开发板教程之十一——NOR FLASH 参考文档:百为stm32开发板光盘\st官方参考资料\ ...
- Uncaught ReferenceError: is not defined
今天,遍历一个HashSet集合对象,想用链接绑定集合对象的值,通过POST方式提交到控制器.结果程序无反应,按F12键进入调试模式,谷歌总是提示Uncaught ReferenceError: ...
- 08_传智播客iOS视频教程_Foundation框架
比如产生随机数.这个功能要你写吗?不用,因为苹果已经写好了.后面想开发一个ios程序,往界面上放一个按钮,实际上这个按钮不用你写别人已经写好了,你就拿过来拖一下就可以了. 框架是1个功能集 苹果或者第 ...
- (转)ASP.NET 4.0 尚未在 Web 服务器上注册
安装vs2010的时候忘记先安装IIS7了,导致出现了这个问题.经过网络查询发现解决方法如下: 运行:cmd命令,进入命令管理器, 输入:cd C:\\WINDOWS\\Microsoft.NET\\ ...
- bzoj 1661: [Usaco2006 Nov]Big Square 巨大正方形【枚举】
每句两个顶点确定正方形,取max即可 #include<iostream> #include<cstdio> using namespace std; int n,x,y,s, ...
- js 调试方法两种
JS的错误捕获一般有下面两种方式: 1. 异常捕获常用方法是 try/catch/ throw /finally 2. 全局捕获window.onerror 1. try/catch/throw/fi ...
- 有了Git这些操作,我再也不怕开发了!
Git 是什么? Git 是一个分布式的代码管理容器,本地和远端都保有一份相同的代码. Git 仓库主要是由是三部分组成:本地代码,缓存区,提交历史. Git 有哪些常规操作? Git的常规操作你了解 ...
- 使用jquery进行跨域操作
ajax默认是不支持跨域操作的,只能提交跨域请求,无法获得响应.而可以用$.getScript()函数来进行跨域操作.代码如下: <button id="btnTest"&g ...
- [POI2008]海报PLA
Description N个矩形,排成一排. 现在希望用尽量少的矩形海报Cover住它们. Input 第一行给出数字N,代表有N个矩形.N在[1,250000] 下面N行,每行给出矩形的长与宽.其值 ...