网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed
这个插件在前段时间用过一次,当时是改一个网站。要求顶部的菜单栏随着滚动条的滚动而固定。也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置。 在这篇文章中,再进行总结一下。
一.scrolltofixed插件功能
固定某个元素的位置,在页面滚动时,元素仍然显示。
二.scrolltofixed官方地址
https://github.com/bigspotteddog/ScrollToFixed。在官方地址上有使用说明,在下面有插件的属性方法说明。demo中也有详细的用例,可以下载下来看下。
三.scrolltofixed使用方法
scrolltofixed插件的使用范围还是比较广的,我们可以固定顶部,也可以固定侧边栏,也可以说“固定页面中任何一个元素”。通过和其它插件的使用,可以得到非常好的效果。如检测到滚动条到某一位置,显示某一元素。而在测试用例中,我们将scrolltofixed插件与scrollto插件一起使用,具体效果可以看下面的“测试文件”。
1.引用文件
scrolltofixed插件使用非常简单,只需要引用两个js就可以了。一个文件是jquery,一个是scrolltofixed插件所需的js文件。
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-scrolltofixed.js"></script>
2.css样式文件。使用插件不需要样式文件,但是我们需要定义固定位置的元素,元素需要我们自定义样式。这里不贴出样式文件,可以看下面的“测试文件”。
3.js代码。一句话就可以实现初始化,也可以按照需要设置初始化属性。如元素的样式,固定时显示的样式,到哪一个元素时,固定元素不再固定等。可以看官方demo。
$('#operbox').scrollToFixed();
4.使用的html。固定位置的元素需要使用html。可以看下面的“测试文件”。
在测试scrolltofixed插件时,为了提高测试用例的功效,同时使用了scrollto插件,scrollto插件用于滚动到指定元素。
测试环境:ie8浏览器,chrome,firefox。测试结果:
测试地址:固定位置插件scrolltofixed
网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed的更多相关文章
- 网站开发常用jQuery插件总结(六)关键词说明插件cluetip
我们开发的网站,总有它一定的用途.如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验.既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容).例如企业站的关键词大部分 ...
- 网站开发常用jQuery插件总结(11)折叠插件Akordeon
实现折叠菜单,可以完全不使用插件.如果使用jquery的话,实现起来也比较简单,我们只需要定义折叠菜单的样式,然后使用jquery中的渐隐渐现就可以了.如果我们自己写折叠菜单,可以方便的使用我们自己的 ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- 网站开发常用jQuery插件总结(三)拖拽插件gridster
1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- 网站开发常用jQuery插件总结(十)菜单插件superfish
网站对于菜单的依赖其实并不是很大,我们完全可以不使用菜单来设计网站,显示网站内容.但是如果网站的分类太多,“也许”使用菜单作为网站导航可以使 用户 更方便的寻找内容.superfish插件就是用于实现 ...
- 网站开发常用jQuery插件总结(八)标签编辑插件Tagit
一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关 ...
- 网站开发常用jQuery插件总结(七)背景插件backstretch
一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站 ...
- 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller
网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...
随机推荐
- python 实战
用Python写一个真正的Web App! 目标 我们设定的实战目标是一个Blog网站,包含日志.用户和评论3大部分. 比如webpy.org上就提供了一个Blog的例子,目测也就100行代码. 我们 ...
- oc学习之路----APNS消息推送从证书到代码(2015年4月26号亲试可用)
前言:看这篇博客之前要准备:首先的有一个99刀的个人开发者账号或者199刀的企业开发者账号,其次你用的是apns消息推送,(本人之前四处打听有没有其他消息推送的方法:收获如下:首先如果想做到apns的 ...
- Redis常用数据类型
Redis常用数据类型 转载自:http://blog.sina.com.cn/s/blog_7f37ddde0101021q.html Redis最为常用的数据类型主要有以下五种: ●Str ...
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
- 版本控制Subversion TortoiseSVN apache VisualSVN笔记(转载)
转载于http://blog.sina.com.cn/s/blog_6b94d5680101m7ah.html Subversion(简称svn)是近年来崛起的版本管理软件,是cvs的接班人.目前,绝 ...
- HDU - 5187 - zhx's contest (高速幂+高速乘)
zhx's contest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) To ...
- iOS开发简单高效的数据存储
在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题,你是用什么方法来持久保存数据的?这是在几乎每一次关于iOS技术的交流或讨论都会被提到的问题,而且大家对这个问题的热情持续高涨.本文主要从概 ...
- struts----用Action的属性接收参数
本次学习的内容是用Action的属性接收参数 具体内容为: 一.准备工作 1.新建Web工程 2.添加struts:右键点击工程名选择My Eclipse-->点击add struts..--& ...
- .net System.TypeInitializationException 类型初始值设定项引发异常
错误原因:静态字段连接数据库内容错误(应为Integrated Security=True) 果然解决! 来自:http://blog.csdn.net/zhang1597116/article/de ...
- 安卓获取Assets目录下的资源
获取Assets目录下的资源 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 ! ...