Question

我有#sidebar（从#header div下方开始）和#footer（距离页面底部约120px）。

我正在尝试使用页面内容滚动侧边栏。下面的代码是半成功的：

/* 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');
        }
    });
});

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

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

提前致谢，

Answer 1

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

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"
            });
        }
    });
});

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

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

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>

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

1 个答案: