Javascript jQuery 滚动 DIV：当 DIV 到达页脚时停止滚动

jQuery scrolling DIV: stop scrolling when DIV reaches footer

提问by dunc

I have a #sidebar(which starts below my #headerdiv) and a #footer(around 120px off the bottom of the page).

我有一个#sidebar（从我的#headerdiv下方开始）和一个#footer（离页面底部大约 120 像素）。

I'm trying to make the sidebar scroll with the content of the page. The code below does this semi-successfully:

我正在尝试使侧边栏随页面内容一起滚动。下面的代码半成功地做到了这一点：

/* profile sidebar */
#sidebar>div{ width: 300px; margin-top: 10px; }
#sidebar.fixed>div{position:fixed;top:0;}
#sidebar.fixed_bottom>div{position:fixed;bottom:172px;}

jQuery(function ($) {
    $.fn.scrollBottom = function() { 
        return $(document).height() - this.scrollTop() - this.height(); 
    };

    var el = $('#sidebar'),
    pos = el.position().top;

    $(window).scroll(function() {
        if ($(this).scrollTop() >= pos) {
            if ( $(this).scrollBottom() <= 172 ) { 
                el.removeClass('fixed');
                el.addClass('fixed_bottom');
            } else { 
                el.removeClass('fixed_bottom');
                el.addClass('fixed');
            }
        } else {
            el.removeClass('fixed');
        }
    });
});

The problem is, on smaller resolutions, this makes the sidebar "jump" once you reach a certain position on the page. It stops it from overlapping the footer (which is the problem if you remove the fixed_bottomclass) but doesn't look good.

问题是，在较小的分辨率下，一旦您到达页面上的某个位置，这会使侧边栏“跳跃”。它阻止它与页脚重叠（如果您删除fixed_bottom类，这是问题）但看起来不太好。

What I'd like to do is this: user scrolls to the bottom of the page, the sidebar scrolls along with the content until it reaches say 20px above the top of my footer, at which point it stays there until the user scrolls back up.

我想要做的是：用户滚动到页面底部，侧边栏与内容一起滚动，直到它到达我的页脚顶部上方 20px 处，此时它保持在那里直到用户向上滚动.

Thanks in advance,

提前致谢，

回答by James Montagne

I believe this should do what you want.

我相信这应该做你想做的。

http://jsfiddle.net/FDv2J/3/

http://jsfiddle.net/FDv2J/3/

#sidebar>div{ width: 100px; margin-top: 10px; position:fixed; left: 0; top: 0;}

---

---

$(function() {
    $.fn.scrollBottom = function() {
        return $(document).height() - this.scrollTop() - this.height();
    };

    var $el = $('#sidebar>div');
    var $window = $(window);

    $window.bind("scroll resize", function() {
        var gap = $window.height() - $el.height() - 10;
        var visibleFoot = 172 - $window.scrollBottom();
        var scrollTop = $window.scrollTop()

        if(scrollTop < 172 + 10){
            $el.css({
                top: (172 - scrollTop) + "px",
                bottom: "auto"
            });
        }else if (visibleFoot > gap) {
            $el.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $el.css({
                top: 0,
                bottom: "auto"
            });
        }
    });
});

I tried to break things up and name variables in such a way that it would be understandable. Let me know if there's anything you're unsure of. Notice that I added resizeas well as scroll since it matters if the window changes size.

我试图分解事物并以一种可以理解的方式命名变量。如果您有任何不确定的地方，请告诉我。请注意，我添加了resize滚动条，因为窗口大小改变很重要。

EDIT: Modified version using similar technique to the original to find the upper bound:

编辑：使用与原始版本类似的技术来查找上限的修改版本：

http://jsfiddle.net/FDv2J/4/

http://jsfiddle.net/FDv2J/4/

$(function() {
  $.fn.scrollBottom = function() {
    return $(document).height() - this.scrollTop() - this.height();
  };

  var $el = $('#sidebar>div');
  var $window = $(window);
  var top = $el.parent().position().top;

  $window.bind("scroll resize", function() {
    var gap = $window.height() - $el.height() - 10;
    var visibleFoot = 172 - $window.scrollBottom();
    var scrollTop = $window.scrollTop()

    if (scrollTop < top + 10) {
      $el.css({
        top: (top - scrollTop) + "px",
        bottom: "auto"
      });
    } else if (visibleFoot > gap) {
      $el.css({
        top: "auto",
        bottom: visibleFoot + "px"
      });
    } else {
      $el.css({
        top: 0,
        bottom: "auto"
      });
    }
  }).scroll();
});

body{
  margin: 0;
}
#sidebar>div {
  width: 100px;
  height: 300px;
  margin-top: 10px;
  background-color: blue;
  position: fixed;
}
#stuff {
  height: 1000px;
  width: 300px;
  background-image: url("http://placekitten.com/100/100")
}
#footer,
#header {
  height: 172px;
  width: 300px;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="header"></div>

<div id="sidebar">
  <div class="fixed">sidebar</div>
</div>

<div id="stuff">

</div>

<div id="footer">

</div>