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


Posted in Javascript onApril 21, 2015

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

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
javascript判断数组内是否重复的方法
Apr 21 #Javascript
jQuery菜单插件superfish使用指南
Apr 21 #Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 #Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 #Javascript
jQuery背景插件backstretch使用指南
Apr 21 #Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 #Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 #Javascript
You might like
多重?l件?合查?(一)
2006/10/09 PHP
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
vue权限路由实现的方法示例总结
2018/07/29 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
python交互式图形编程实例(一)
2017/11/17 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python super()方法原理详解
2020/03/31 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
旅行社各个岗位职责
2014/03/15 职场文书
网络技术专业求职信
2014/05/02 职场文书
自主招生教师推荐信
2014/05/10 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS