到达页脚时如何停止追随侧边栏？

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底部位置是否大于#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>