Блок обрезается при прокрутке фиксированного элемента на странице ⇐ Jquery

[Гость]

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

Эта корзина должна располагаться у правого края и всегда прокручиваться вверх и вниз по странице.

В принципе все работает, но есть небольшая проблема, когда я нажимаю «Добавить 1» и «Добавить 2», товары якобы добавятся в корзину и моя страница будет выглядеть вот так



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

В чем может быть проблема? Весь основной скрипт реализован в функции VPDetail

let VPDetail = { инициализация: функция () { пусть _self = это; $(окно).resize(функция () { _self.positionContainer(); }); $(окно).scroll(функция () { _self.positionContainer(); }); _self.positionContainer(); }, позицияКонтейнер: функция () { пусть rp = $(".js-real-position"); let columns = $('.js-column-to-scroll-block'); let columnsAdd = $('.js-column-to-scroll-block-additional'); let sp = $(".js-static-position"); пусть topDelta = 20; пусть топ = топДельта; if (column.position().top + columns.height() + columnsAdd.height() - sp.height() < $(document).scrollTop() + topDelta) { top = columns.position().top + columns.height() + columnsAdd.height() - sp.height() - $(document).scrollTop(); } if ($(document).scrollTop() + topDelta > rp.position().top) { sp.css({top: top + 'px', 'position': 'fixed'}); } еще { sp.css({top: '0', 'position': 'static'}); } sp.width(sp.parent().width()); }, } $(функция (){ ВПДетайл.инит(); }) $(".add1").click(function () { $('.add1').css('дисплей', 'нет'); $('.added1').css('дисплей', 'блок'); }); $(".add2").click(function () { $('.add2').css('дисплей', 'нет'); $('.added2').css('дисплей', 'блок'); }); $(".added1").click(function () { $('.added1').css('дисплей', 'нет'); $('.add1').css('дисплей', 'блок'); }); $(".added2").click(function () { $('.added2').css('дисплей', 'нет'); $('.add2').css('дисплей', 'блок'); }); .color-block { отступ: 24 пикселя; фон: #08e8de; радиус границы: 10 пикселей; } .cart-блок { отступ: 24 пикселя; фон: #8A2BE2; радиус границы: 10 пикселей; } .add1, .add2 { высота: 300 пикселей; курсор: указатель; } .added1, .added2 { курсор: указатель; высота: 150 пикселей; дисплей: нет; } .package-detail-info { маржа сверху: 100 пикселей; Пакет Пожалуйста, выберите элементы Добавить 1 Добавить 2 Параметры: Добавлено 1 Добавлено 2