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的顶部位置，以防止增大。请注意，您应该删除margin-top中的CSS #left_menu

$(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>

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

1 个答案: