这个插件在前段时间用过一次,当时是改一个网站。要求顶部的菜单栏随着滚动条的滚动而固定。也大体写了一下,不过在文章中也只是提了一下,文章地址: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的更多相关文章

  1. 网站开发常用jQuery插件总结(六)关键词说明插件cluetip

    我们开发的网站,总有它一定的用途.如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验.既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容).例如企业站的关键词大部分 ...

  2. 网站开发常用jQuery插件总结(11)折叠插件Akordeon

    实现折叠菜单,可以完全不使用插件.如果使用jquery的话,实现起来也比较简单,我们只需要定义折叠菜单的样式,然后使用jquery中的渐隐渐现就可以了.如果我们自己写折叠菜单,可以方便的使用我们自己的 ...

  3. 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  4. 网站开发常用jQuery插件总结(三)拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  5. 网站开发常用jQuery插件总结(二)弹出层插件Lightbox

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  6. 网站开发常用jQuery插件总结(十)菜单插件superfish

    网站对于菜单的依赖其实并不是很大,我们完全可以不使用菜单来设计网站,显示网站内容.但是如果网站的分类太多,“也许”使用菜单作为网站导航可以使 用户 更方便的寻找内容.superfish插件就是用于实现 ...

  7. 网站开发常用jQuery插件总结(八)标签编辑插件Tagit

    一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关 ...

  8. 网站开发常用jQuery插件总结(七)背景插件backstretch

    一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站 ...

  9. 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller

    网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...

随机推荐

  1. Unrecognized Windows Sockets error: 0: JVM_Bind 异常解决办法

    java.net.SocketException: Unrecognized Windows Sockets error: 0: JVM_Bind 此异常的原因是服务器端口被占用 所以解决办法是: 一 ...

  2. 解决div和父div不上对齐

    加一个vertical-align: top;就好了.原因就是inline-block会使元素向下对齐.这和padding-top,margin-top没有关系的.使用浮动就不会有这种情况了,当然会带 ...

  3. IOS程序内发短信 MFMessageComposeViewController

    文章转载地址:http://www.headsky.org/?p=63 iOS4.0新加入了MFMessageComposeViewController和MFMessageComposeViewCon ...

  4. [译]信仰是怎样毁掉程序猿的How religion destroys programmers

    作者原文地址 作者John Sonmez 英文水平不够高,翻译不太准确. 翻译地址:译文 尽管文章是13年的,可是这段时间恰好看到.net开源核心之后,各种java和.net掐架. 语言之争有些牵涉到 ...

  5. Android记录6--ViewPage+Fragment的使用例子

    Android记录6--ViewPage+Fragment的使用例子 2013年9月6日Fragment学习 Fragment这个东西,我到现在才接触到,之前没有用到过,关于Fragment这个东西在 ...

  6. Android开发的第一天

    不管做什么开发都是有开始的,对于开发的话开始要的准备的就是开发工具了  安装开发工具配置开发工具好了不多说了现在我来说怎么样安装和配置安卓的开发工具吧 第一首先就是要下载一个JDK (Java SE ...

  7. PHP第四章数组2

    $str =array("dd"=>"d","dc"=>"ds","dd"=>&q ...

  8. C#基础篇01

    vs20vs2013快捷键小节: 1>: #region #endregion(用来折叠冗余代码) 2>:Ctril+K+D快速对其代码: 3>:Ctril+K+C注释选中代码 Ct ...

  9. 关于redhat6的服务说明

    服务名称 功能 默认 建议 备注说明 NetworkManager 主要用于图形网络连接管理 开启 关闭 对服务器无用 abrt-ccpp Automated Bug Reporting Tool 开 ...

  10. jquery知识 内部 外部插入元素

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