Блог

Главная - Вопросы по программированию - Как сделать липкую прокрутку левой и правой боковой панели (на неравномерной высоте) и прокручивать влево и вправо только тогда, когда левая и правая нижняя части совпадают?

Как сделать липкую прокрутку левой и правой боковой панели (на неравномерной высоте) и прокручивать влево и вправо только тогда, когда левая и правая нижняя части совпадают?

#html #jquery #css #bootstrap-4

Вопрос:

Если я попробовал с фиксированной позицией, левый и выравнивание изменяются во всех размерах окон, следовательно, мы можем использовать содержимое по желанию пользователя, мы не упоминаем высоту для левого и правого блоков

 function sticky_relocate() {
  var window_bottom = $(window).scrollTop()   $(window).height();
  var left_con_bot = $('.container-left').offset().top   $('.container-left').outerHeight(true);
  var right_con_bot = $('.container-right').offset().top   $('.container-right').outerHeight(true);
  var lft = $('.container-left').height();
  var rft = $('.container-right').height();


  if ((rft > lft) amp;amp; (window_bottom == left_con_bot)) {
    $('.container-left').css({
      bottom: 0,
      position: 'sticky'
    })
  } else if ((rft < lft) amp;amp; (window_bottom == right_con_bot)) {
    $('.container-right').css({
      bottom: 0,
      position: 'relative'
    })
  } else {
    $('.container-right').addClass('stick');
    $('.container-left').addClass('stick');
  }
}
$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
}); 
 .stick {
  position: relative;
}
.wrapper{
  max-width :1200px;
} 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row">
    <div class="col-lg-8 container-left">
      grid view scroll with fixed header and footer Scrollable grid view with fixed headers and footer how do I make elements fixed on screen and post scroll only
    </div>
    <div class="col-lg-4 container-right">
      grid view scroll with fixed header and footer Scrollable grid view with fixed headers and footer how do I make elements fixed on screen and post scroll only grid view scroll with fixed header and footer Scrollable grid view with fixed headers and footer
      how do I make elements fixed on screen and post scroll only
    </div>
  </div>
  <div class="col-lg-12 pop_block"> Scrollable grid view with fixed headers and footer how do I make elements fixed on screen and post scroll with fixed headers and footer how do I make elements fixed on screen and post scroll only </div>

Пожалуйста, предложите мне (справа>слева) в этом состоянии слева внизу, когда дойдет до нижней части окна, оно должно оставаться таким, как есть, и с правой стороны прокручивать до тех пор, пока его нижняя часть не совпадет с левой нижней аналогично для (слева>>справа)

приведенный выше код не работает для указанного выше условия, которое я попробовал с помощью sticky

Комментарии:

1. position:sticky требуется координация, где вызвать эффект липкости . Я превратил ваши коды в один фрагмент с помощью jquery и bs4, пытаясь понять, что вы пытаетесь сделать/придерживаться . Не уверен, что понимаю, чего ты добиваешься.

2. @ G-Кирилл, когда слева внизу div, коснитесь нижней части окна, правой стороны, чтобы прокрутить верхнюю часть до тех пор, пока ее нижняя часть не станет равной левой нижней части.

Метки: ,