`
JavaSam
  • 浏览: 951802 次
  • 性别: 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插件库-jquery滚动菜单插件.zip

    这个"jquery插件库-jquery滚动菜单插件.zip"文件包含了一个专为jQuery设计的滚动菜单插件,用于增强网站的导航体验,尤其适用于那些内容丰富的网站或者多级菜单结构。 滚动菜单插件是网页设计中的一种常见工具,它...

    横向jQuery内容滚动插件Sly

    **横向jQuery内容滚动插件Sly详解** 在网页设计中,内容滚动插件是一个非常重要的工具,它能够帮助开发者创建动态、吸引人的用户体验。其中,Sly是一个优秀的jQuery插件,专为实现横向内容滚动而设计。这个插件不仅...

    jQuery滚动条插件jqueryslimscrolljs

    **jQuery滚动条插件jquery.slimscroll.js** 在网页设计中,滚动条往往被视为不可或缺的元素,尤其是在内容丰富、页面布局紧凑的场景下。jQuery slimScroll.js 是一款轻量级的JavaScript插件,专为增强和美化网页...

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

    **jQuery固定背景视觉滚动特效插件** 在网页设计中,为了增强用户体验,视觉滚动特效已经成为一种常见的设计手法。"jQuery固定背景视觉滚动特效插件"就是为此目的而开发的工具,它利用了jQuery库的强大功能,结合...

    jQuery滚动元素固定位置插件

    **jQuery滚动元素固定位置插件详解** 在网页设计中,我们常常希望某些元素在用户滚动页面时保持在屏幕的特定位置,例如导航栏或侧边栏。这时,jQuery-sticky-elements插件就能派上用场。这款插件是基于流行的...

    jquery页面滚动固定元素插件

    **jQuery页面滚动固定元素插件——hc-sticky详解** 在网页设计中,有时我们需要实现一个效果,即当页面滚动时,某个元素始终保持在视口的可见范围内,这种效果被称为“固定定位”。`hc-sticky`是一款优秀的jQuery...

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

    **jQuery滚动固定侧边栏元素插件Sticksy.js**是一种高效的前端开发工具,它专为那些希望在用户滚动页面时保持侧边栏元素始终可见的开发者设计。这个插件利用了jQuery的强大功能,使开发者能够轻松实现这种交互效果,...

    jQuery横向和纵向内容滚动插件Sly

    **jQuery横向和纵向内容滚动插件Sly** 在网页设计中,内容滚动是一种常见的交互方式,它可以提升用户体验,尤其在处理大量信息时。jQuery作为一款强大的JavaScript库,提供了丰富的插件来实现各种滚动效果。其中,...

    jQuery表格头和列固定插件

    **jQuery表格头和列固定插件——RWD Table** 在网页设计中,处理大型数据表格时,保持表头和特定列在用户滚动时可见是非常重要的功能。这有助于提高用户体验,尤其是当表格包含大量数据,需要用户上下左右滚动时。`...

    jQuery table scroll表格插件内容部分加滚动条

    总之,jQuery Table Scroll插件为网页中的大型表格提供了便捷的滚动条解决方案,使得用户可以在有限的屏幕空间内查看和操作大量数据。通过合理地配置参数和结合其他前端技术,你可以创建出高效且用户体验良好的数据...

    jQuery滚动效果插件 Waypoints.zip

    **jQuery滚动效果插件Waypoints** Waypoints是一个强大的jQuery插件,专为开发者设计,用于在用户滚动网页时触发特定的事件。这个插件的核心功能是监控页面元素何时进入或离开浏览器视口,从而实现丰富的动态滚动...

    jquery元素滚动插件

    为了实现更复杂的元素滚动效果,如平滑滚动、无限滚动等,我们就需要借助于专门的jQuery滚动插件。这里以"ele-scroll-master"为例,这是一个专注于元素滚动的插件,它可能包含了以下功能: 1. **平滑滚动**:提供...

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

    总的来说,"Jquery表格添加滚动条插件,固定表头"这个主题涉及到前端开发中的DOM操作、事件处理、CSS样式和JavaScript插件使用。通过使用jQuery和相应的插件,我们可以提供更优秀的用户体验,使用户在浏览大数据量的...

    jquery平滑滚动插件

    **jQuery平滑滚动插件详解** 在Web开发中,用户界面的流畅性和用户体验是至关重要的。jQuery平滑滚动插件正是为了实现这一点而设计的,它使得网页元素的滚动过程更加平滑、自然,尤其在处理长页面和焦点图切换时...

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

    《jQuery实现两边固定中间滚动效果详解》 在网页设计中,为了提高用户体验,经常会使用一些交互性强的特效,其中“两边固定中间滚动”的布局模式尤为常见。这种布局方式在用户向下浏览长页面时,能够保持顶部和底部...

    jquery表头固定、列固定完美解决方案

    总结来说,"jquery表头固定、列固定完美解决方案"是通过jQuery库和自定义JavaScript插件实现的一种优化用户体验的方法,特别是在处理大量数据的表格时。它提供了表头和列的固定功能,使用户在浏览长表格时能更方便地...

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

    《jQuery.posfixed导航菜单固定头部跟随屏幕滚动插件详解》 在网页设计中,为了提供良好的用户体验,常常需要实现一种效果:当用户滚动页面时,导航菜单始终保持在屏幕的可见位置,这种效果被称为“固定头部”或...

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

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

Global site tag (gtag.js) - Google Analytics