Мой фиксированный SIDEBAR плавает над нижним колонтитулом после изменения высоты в другом div

Question

У меня есть боковая панель, которая очень хорошо плавает при загрузке и не переполняется над боковой панелью после прокрутки до нижней части.На главном div у меня есть продукты и раздел, где продукты могут быть отфильтрованы.Таким образом, при использовании фильтра высота основного деления изменяется по мере уменьшения продуктов при использовании фильтров.Следовательно, после нажатия на кнопки фильтра переполнение боковой панели над боковой панелью приводит к изменению высоты или смещения.

Это плавающий код боковой панели.

$stick = $('div.sidebar');
$foot = $('#footer');
margin = 80;
offtop = $stick.offset().top - margin;
offbtm = $foot.offset().top - ( margin*3 + $stick.height() );

$(window).scroll(function () {
    scrtop = $(window).scrollTop();
  if (scrtop > offtop && $stick.hasClass('natural')) {
    $stick.removeClass('natural').addClass('fixed').css('top', margin);
  }
  if (offtop > scrtop && $stick.hasClass('fixed')) {
    $stick.removeClass('fixed').addClass('natural').css('top', 'auto');
  }
  if (scrtop > offbtm && $stick.hasClass('fixed')) {
    $stick.removeClass('fixed').addClass('bottom').css('top', offbtm+margin);
  }
  if (offbtm > scrtop && $stick.hasClass('bottom')) {
    $stick.removeClass('bottom').addClass('fixed').css('top', margin);
  }
});
</script>

Использование здесь общих фильтров: https://www.w3schools.com/howto/howto_js_filter_elements.asp

Мой HTML-код очень прост.Значительно больше похоже на

<div class="container">
<div class="col-md-3 sidebar">..</div>
<div class="col-md-9 productsSection">..</div>
</div>

<footer> ...</footer>

Answer 1

Поскольку у вас есть его положение: исправлено, вы можете добавить поле сверху и снизу, чтобы правильно расположить его относительно окна браузера.Для переполнения попробуйте добавить это правило. Overflow-y: скрытый. Overflow-x: auto. Надеюсь, это поможет

.