javascript - 当跟随侧边栏到达页脚时如何停止？

Question

我有侧边栏，可以通过滚动来跟随。如果侧边栏到达页脚，如何停止跟随？

这是我到目前为止所尝试的。

$(function() {
  var floatPosition = parseInt($("#left_menu").css('top'));

  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    var newPosition = scrollTop + floatPosition + "px";
    var newPosition2 = scrollTop;

    $("#left_menu").stop().animate({
      "top" : newPosition2
    }, 400);

  }).scroll();
});        

.left_menu{position:absolute;top:0;left:0;width:100px; height:330px; margin-top: 30px; background:green}
#footer { background:gray; height:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<div id="left_menu" class="left_menu">menu</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer">foot</div>

请帮忙

Answer 1

您应该检查#left_menu的底部位置是否大于#footer的顶部位置，防止增加它。请注意，您应该删除 #left_menu

的 CSS margin-top

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  var height = $("#left_menu").height();
  var top = $("#footer").offset().top;

  if (scrollTop+height > top)
    scrollTop = top-height;

  $("#left_menu").stop().animate({
    "top": scrollTop
  }, 400);
}).scroll();

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  var height = $("#left_menu").height();
  var top = $("#footer").offset().top;
    
  if (scrollTop+height > top)
    scrollTop = top-height;
  
  $("#left_menu").stop().animate({
    "top": scrollTop
  }, 400);
}).scroll();

.left_menu{
  position:absolute;
  top:0;
  left:0;
  width:100px; 
  height:330px; 
  background:green
}
#footer { 
  background:gray; 
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left_menu" class="left_menu">menu</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer">foot</div>
<br><br><br><br><br><br><br><br>