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 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
jquery实现保存已选用户
Jul 21 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php中的观察者模式简单实例
2015/01/20 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
js自定义回调函数
2015/12/13 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python的gevent框架的入门教程
2015/04/29 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
服务理念标语
2014/06/18 职场文书
管理人员岗位职责
2015/02/14 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
详解Python小数据池和代码块缓存机制
2021/04/07 Python
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
如何利用js在两个html窗口间通信
2021/04/27 Javascript
python文件与路径操作神器 pathlib
2022/04/01 Python
部分武汉产收音机展览
2022/04/07 无线电
python APScheduler执行定时任务介绍
2022/04/19 Python