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

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

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

赞 (0)

相关推荐

  • jquery滚动条插件jScrollPane的使用介绍

    这是一个js的页面滚动条插件 使用时引入三个文件:(路径自行填写) 复制代码 代码如下: <link type="text/css" href="路径/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="路径/jquery.mousewheel.js

  • JQuery插件iScroll实现下拉刷新，滚动翻页特效

    JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <

  • 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

  • jQuery scroll事件实现监控滚动条分页示例

    scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了    $(window).scroll(function () {        //$(window).scrollTop()这个方法是当前滚动条滚动的距离        //$(window).height()获取当前窗体的高度        //$(docume

  • jQuery中scrollTop()方法用法实例

    本文实例讲述了jQuery中scrollTop()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的滚动条的垂直偏移量. 语法结构一: 当scrollTop()方法不带有参数的时候是返回匹配元素相对滚动条顶部的偏移量. 复制代码 代码如下: $(selector).scrollTop() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8&quo

  • jQuery中ScrollTo用法示例

    jQuery中ScrollTo用法示例

    本文实例讲述了jQuery中ScrollTo用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery的位置

  • jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码

  • jquery scrollTop方法根据滚动像素显示隐藏顶部导航条

    本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scrolloversee.htm scrollTop的介绍: 语法 $(selector).scrollTop(offset) 参数 offset 描述 可选.规定相对滚动条顶部的偏移,以像素计. 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offse

  • jQuery插件scroll实现无缝滚动效果

    scroll滚动插件 支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置 默认配置参数可修改 $(".content").easysroll({ //默认配置参数 direction: "left", //滚动方向 left(向左)right(向右) top(向上) bottom(向下) 默认left numberr: "1", //每一次滚动数量 默认是1 delays:"1000",//完成一次动画所

随机推荐