Как перестать следовать боковой панели, когда она достигает нижнего колонтитула? - PullRequest
Новая
       8

Как перестать следовать боковой панели, когда она достигает нижнего колонтитула?

0 голосов
/ 18 ноября 2018

У меня есть боковая панель, которая следует за прокруткой.Если боковая панель доходит до нижнего колонтитула, как перестать следовать?

Это то, что я пытался здесь до сих пор. 

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

Пожалуйста, помогите

1 Ответ

0 голосов
/ 18 ноября 2018

Вы должны проверить, больше ли нижняя позиция #left_menu, чем верхняя позиция #footer, не увеличивать ее. Обратите внимание, что вы должны удалить CSS margin-top из #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>
...