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 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
php基于redis处理session的方法
Mar 14 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
自己做矿石收音机
2021/03/02 无线电
WordPress中is_singular()函数简介
2015/02/05 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
微信小程序模版渲染详解
2018/01/26 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
关于Django外键赋值问题详解
2017/08/13 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
python3将变量输入的简单实例
2020/08/19 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
数据员岗位职责
2013/11/19 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
建筑横幅标语
2014/10/09 职场文书
php实例化对象的实例方法
2021/11/17 PHP