jQuery固定元素插件scrolltofixed使用指南

   jQuery固定元素插件scrolltofixed使用指南

         ScrollToFixed (jquery Fixed plugin)能够让网页的导航或表头等固定在顶部或底部,让用户更方便的操作或查看信息。除了导航和表头,也可以固定其他内容,比如广告、返回顶部等等。

  这个插件在前段时间用过一次,当时是改一个网站。要求顶部的菜单栏随着滚动条的滚动而固定。也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置。 在这篇文章中,再进行总结一下。

  一.scrolltofixed插件功能

  固定某个元素的位置,在页面滚动时,元素仍然显示。

  二.scrolltofixed官方地址

  https://github.com/bigspotteddog/ScrollToFixed。在官方地址上有使用说明,在下面有插件的属性方法说明。demo中也有详细的用例,可以下载下来看下。

  三.scrolltofixed使用方法

  scrolltofixed插件的使用范围还是比较广的,我们可以固定顶部,也可以固定侧边栏,也可以说“固定页面中任何一个元素”。通过和其它插件的使用,可以得到非常好的效果。如检测到滚动条到某一位置,显示某一元素。而在测试用例中,我们将scrolltofixed插件与scrollto插件一起使用,具体效果可以看下面的“测试文件”。

  1.引用文件

  scrolltofixed插件使用非常简单,只需要引用两个js就可以了。一个文件是jquery,一个是scrolltofixed插件所需的js文件。

  ?

1
2

<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。测试结果:

时间: 2024-09-08 05:07:46

jQuery固定元素插件scrolltofixed使用指南的相关文章

jQuery固定元素插件scrolltofixed使用指南_jquery

这个插件在前段时间用过一次,当时是改一个网站.要求顶部的菜单栏随着滚动条的滚动而固定.也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置. 在这篇文章中,再进行总结一下. 一.scrolltofixed插件功能 固定某个元素的位置,在页面滚动时,元素仍然显示. 二.scrolltofixed官方地址 https://github.com/bigspotteddog/ScrollToFixed.在官方地址上有使用说明,在下面有插件的属性方法说明.demo中也有详细的

jQuery关键词说明插件cluetip使用指南

  jQuery关键词说明插件cluetip使用指南          我们在做web项目的时候,经常会使用到提示效果.html自带的提示效果是label标签的title,但是这个效果过于简单和难看,并且不方便调整样式.今天我偶然发现个jQuery的插件,可以很方便的做出漂亮的提示效果. 我们开发的网站,总有它一定的用途.如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验.既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容).例如企业站的关键词大部分是企业名称

jQuery标签编辑插件Tagit使用指南

  jQuery 的 tagit 插件效果还是不错的,今天用到该插件,下面给大家详细讲解下此插件的具体用法.这里推荐给大家,有需要的小伙伴可以参考下. 一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关键词标签化,成为一个整体.方便删除与浏览. 二.Tagit官方地址 http://aehlke.github.io/tag-it/ 官方地址上有使用

jQuery关键词说明插件cluetip使用指南_jquery

我们开发的网站,总有它一定的用途.如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验.既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容).例如企业站的关键词大部分是企业名称或产品名称,技术站的关键词大部分是技术术语.不论是企业宣传产品或分享思路经验,我们都想给某些术语加上说明或链接(跳转到术语页面),这时我们就可以使用cluetip插件. 1.     cluetip插件功能   主要用于为某些关键词添加提示说明功能,也可以展示广告.cluetip插件可以读

jQuery拖拽插件gridster使用指南_jquery

gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素. 1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本地测试总是出现这样那样的问题,一是无法移动,二是在磁铁的附近有一个黑点,可能是定位使用的.但是如果在网站中正常使用,应该不会出现这样的黑点.gridster插件的属性和

jQuery标签编辑插件Tagit使用指南_jquery

一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关键词标签化,成为一个整体.方便删除与浏览. 二.Tagit官方地址 http://aehlke.github.io/tag-it/ 官方地址上有使用说明,也有用例.用例的颜色搭配也可以选择.不过选来选去也就是这几种,Tagit插件使用jqueryui,所以jqueryui提供的样式也兼容.jquer

jQuery拖拽插件gridster使用指南

  gridster.js是一款基于jquery的前端拖拽插件,效果相当的不错,大家可以先看看Demo(http://gridster.net/#intro)(蓝色部分的白块就是了,可以随便拖动,娱乐性很强). gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素. 1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有

JQuery右键菜单插件ContextMenu使用指南

 通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式.   代码如下: <HTML>  <HEAD>   <TITLE> JQuery右键菜单 </TITLE>   <script  src="jquery-1.2.6.min.js"></script>   <script src="jquery.contextmenu.r2.js"></scr

JQuery右键菜单插件ContextMenu使用指南_jquery

插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 压缩版: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js Jquery主页:   http://jquery.com/ 通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式. 复制代码