`
JavaSam
  • 浏览: 936058 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 滚动固定插件

 
阅读更多
;(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);

 

分享到:
评论

相关推荐

    jquery滚动固定侧边栏插件

    jquery滚动固定侧边栏插件

    jQuery滚动条插件jqueryslimscrolljs

    jQuery滚动条插件 – jquery.slimscroll.js。jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动。

    jquery页面滚动固定元素插件

    hc-sticky是一款jquery页面滚动固定元素插件。该插件可以跨浏览器使用,具有在页面滚动时将指定元素固定在窗口上的功能。该页面滚动固定元素插件有js版本和jquery版本。

    jQuery固定背景视觉滚动特效插件

    这是一款轻量级的jQuery固定背景视觉滚动特效插件。该jQuery固定背景视觉滚动特效插件使用CSS background-position属性和简单的js代码来完成页内滚动时的背景图片视觉差效果。

    jQuery滚动固定侧边栏元素插件Sticksy.js

    Sticksy.js是一款jQuery滚动固定侧边栏元素插件。该插件可以在页面滚动时,将任意元素固定在页面的可视区域中,跟随页面一起滚动。

    jQuery滚动元素固定位置插件

    jQuery-sticky-elements是一款可以将元素位置固定的jQuery插件。使用该插件你需要做的是设置div元素的位置,然后通过该插件的参数可以控制页面滚动时该元素是隐藏还是位置固定不动。

    jQuery表格头和列固定插件

    RWD Table是一款jQuery表格头和列固定插件。该jquery插件可以在页面滚动时冻结表格头,或在横向拖动滚动条时,冻结某一表格列。

    jQuery两边固定中间滚动代码.zip

    jQuery两边固定中间滚动代码是一款在页面向下滚动时,可以将左侧或右侧侧边栏固定在页面中。

    jquery浮动广告滚动位置固定插件

    基于jquery的滚动固定位置广告位插件,支持自定义偏移量。 用法: window.onscroll=function(){floatWin("branding","right","top")} window.onscroll=function(){floatWin("branding","left","top")} window....

    6种效果jquery页面滚动div层固定插件hcsticky

    6种效果jquery页面滚动div层固定插件hcsticky,6种效果jquery页面滚动div层固定插件hcsticky

    jQuery页面滚动顶部固定tab选项卡切换代码

    这是一款美观实用的jQuery页面滚动顶部固定tab选项卡切换代码,新闻列表导航选项卡切换插件。

    Jquery表格添加滚动条插件,固定表头

    非常好用,可以给表格添加滚动条,固定表头,支持冻结列,简单实用. 使用方法: $(document).ready(function() { $("#tblReceiptsSalesDay").toSuperTable({ width: "950px", height: "350px", fixedCols:3, ...

    导航菜单固定头部跟随屏幕滚动jQuery插件posfixed

    jQuery-Posfixed 能够让网页的导航或表头等固定在顶部或底部,让用户更方便的操作或查看信息,淘宝网、易迅网等电子商务网站常常用到这种效果。除了导航和表头,也可以固定 其他内容,比如广告、返回顶部等等,同时 ...

    jQuery固定侧边栏导航菜单插件

    这是一款非常实用的jQuery固定侧边栏导航菜单插件。该插件分三种固定侧边栏效果:正常、小型和大型侧边栏。该固定侧边栏插件在用户向下滚动页面到一定距离时,侧边栏就会固定随页面往下滚动,非常实用。

    jQuery滚动插件ScrollMagic.zip

    ScrollMagic 是 jQuery 插件,允许用户像进度条一样使用滚动条。用户可以: 在特定滚动位置开始一个动画 滚动条滚动的时候同步动画 固定一个元素在指定的滚动位置 在线演示 标签:Scroll

    jQuery表格顶部与左右两侧固定滚动代码

    jQuery表格顶部与左右两侧固定滚动代码是一款左右两侧固定列,中间内容可以横向拖动,固定表头,可以横向拖动的表格插件代码。

    jquery表头固定(支持左右,上下滚动)

    jquery表头固定,支持同时上下左右滚动条,无需引用其他插件,直接复制修改就行,方便简单

    jQuery滚动顶部固定导航菜单.zip

    jQuery滚动顶部固定导航菜单是一款基于jquery.1.7.1.min.js插件制作的二级网站导航菜单。鼠标向下滚动,网站菜单始终固定在网页顶部。蓝色风格,很实用。

Global site tag (gtag.js) - Google Analytics