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 TimeField 显示正常时间格式的代码
Jun 28 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
使用node.js搭建服务器
May 20 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
简单谈谈javascript高级特性
Sep 04 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
PHP获取MAC地址的函数代码
2011/09/11 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
微信自定义分享php代码分析
2016/11/24 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python实现图片上添加图片
2019/11/26 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
数据库的约束含义
2012/09/09 面试题
财务会计专业求职信范文
2013/12/31 职场文书
党的作风建设心得体会
2014/10/22 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
元旦主持词开场白
2015/05/29 职场文书
2016年学校招生广告语
2016/01/28 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技