jQuery scrollFix滚动定位插件


Posted in Javascript onApril 01, 2015

当用户向上或向下滚动页面到一定位置时,目标元素开始固定定位(position:fixed),当回滚到原位置时目标元素恢复到原状态,可以定制触发滚动相对屏幕位置和触发滚动方向,兼容IE6

【插件参数】

$(".target_element").scrollFix( [ "top" | "bottom" | length(可以为负,表示相对bottom), [ "top" | "bottom" ] ]);

第一个参数: 可选,默认为"top",当目标元素到了屏幕相对的位置时开始触发固定,可以填一个数值,如100,-200 ,负值表示相对于屏幕下方

第一个参数: 可选,默认为"top",表示触发固定的滚动方向,"top"表示从上向下滚动时触发,"bottom"表示从下向上滚动时触发

【下载插件】scrollFix(3water.com).rar

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="scrollFix.js"></script>

<p><span style="color: #808000;">【代码示例】</span></p>

<div class="d">

<div class="demo" style="background: #ff6000;">$("#a").scrollFix(-200);

<div>滚动到距离下面200px时开始固定,默认从上到下触发</div>

</div>

 </div>

<div class="d">

<div class="demo" style="background: #82BF00;">$("#b").scrollFix(200,"bottom");

<div>滚动到距离上面200px时开始固定,指定"bottom"从下到上触发</div>

</div>

 </div>

<div class="d">

<div class="demo" style="background: #0C9CAE;">$("#c").scrollFix("top","top");

<div>滚动到距离上面0时开始固定,指定"top"从上到下触发</div>

</div>

 </div>

<div class="d">

<div class="demo" style="background: #478FCE;">$("#d").scrollFix("bottom","top");

<div>滚动到距离下面0时开始固定,指定"bottom"从下到上触发</div>

</div>

</div>

实现代码:
<script type="text/javascript">// <![CDATA[

window.onload=function(){

  $(".demo:eq(0)").scrollFix(-200);

  $(".demo:eq(1)").scrollFix(200,"bottom");

  $(".demo:eq(2)").scrollFix("top","top");

  $(".demo:eq(3)").scrollFix("bottom","bottom");

}

// ]]></script>

核心代码:

;(function($) {
 jQuery.fn.scrollFix = function(height, dir) {
  height = height || 0;
  height = height == "top" ? 0 : height;
  return this.each(function() {
   if (height == "bottom") {
    height = document.documentElement.clientHeight - this.scrollHeight;
   } else if (height < 0) {
    height = document.documentElement.clientHeight - this.scrollHeight + height;
   }
   var that = $(this),
    oldHeight = false,
    p, r, l = that.offset().left;
   dir = dir == "bottom" ? dir : "top"; //默认滚动方向向下
   if (window.XMLHttpRequest) { //非ie6用fixed


    function getHeight() { //>=0表示上面的滚动高度大于等于目标高度
     return (document.documentElement.scrollTop || document.body.scrollTop) + height - that.offset().top;
    }
    $(window).scroll(function() {
     if (oldHeight === false) {
      if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
       oldHeight = that.offset().top - height;
       that.css({
        position: "fixed",
        top: height,
        left: l
       });
      }
     } else {
      if (dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) {
       that.css({
        position: "static"
       });
       oldHeight = false;
      } else if (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight) {
       that.css({
        position: "static"
       });
       oldHeight = false;
      }
     }
    });
   } else { //for ie6
    $(window).scroll(function() {
     if (oldHeight === false) { //恢复前只执行一次,减少reflow
      if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
       oldHeight = that.offset().top - height;
       r = document.createElement("span");
       p = that[0].parentNode;
       p.replaceChild(r, that[0]);
       document.body.appendChild(that[0]);
       that[0].style.position = "absolute";
      }
     } else if ((dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) || (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight)) { //结束
      that[0].style.position = "static";
      p.replaceChild(that[0], r);
      r = null;
      oldHeight = false;
     } else { //滚动
      that.css({
       left: l,
       top: height + document.documentElement.scrollTop
      })
     }
    });
   }
  });
 };
})(jQuery);
Javascript 相关文章推荐
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
详解Vue底部导航栏组件
May 02 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 #Javascript
JS获取iframe中longdesc属性的方法
Apr 01 #Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 #Javascript
JS去除iframe滚动条的方法
Apr 01 #Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 #Javascript
JS获得图片alt信息的方法
Apr 01 #Javascript
JS实现动态给图片添加边框的方法
Apr 01 #Javascript
You might like
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
python中for语句简单遍历数据的方法
2015/05/07 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
手机促销活动方案
2014/02/05 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
法院个人总结
2015/03/03 职场文书
军事博物馆观后感
2015/06/05 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
python 中的jieba分词库
2021/11/23 Python