The block is cut off when scrolling a fixed element on the page

I made a small adaptation here for adding cart items and added a script that I use for my cart itself

This cart should stick to the right edge and always scroll up and down on the page

In principle, everything works, but there is a small problem, when I click on Add 1 and Add 2, the items will supposedly be added to the cart and my page will look like this

I deliberately circled the empty white space in red because this indentation should always remain, but it turns out that when I scroll down the page and the cart intersects the blue block, this indentation disappears, which should not happen

What could be the problem? The entire main script is implemented in the VPDetail function

let VPDetail = {
    init: function () {
        let _self = this;
        $(window).resize(function () {
            _self.positionContainer();
        });

        $(window).scroll(function () {
            _self.positionContainer();
        });

        _self.positionContainer();
    },
    positionContainer: function () {
        let rp = $(".js-real-position");
        let column = $('.js-column-to-scroll-block');
        let columnAdd = $('.js-column-to-scroll-block-additional');
        let sp = $(".js-static-position");
        let topDelta = 20;
        let top = topDelta;

        if (column.position().top + column.height() + columnAdd.height() - sp.height() < $(document).scrollTop() + topDelta) {
            top = column.position().top + column.height() + columnAdd.height() - sp.height() - $(document).scrollTop();
        }

        if ($(document).scrollTop() + topDelta > rp.position().top) {
            sp.css({top: top + 'px', 'position': 'fixed'});
        } else {
            sp.css({top: '0', 'position': 'static'});
        }

        sp.width(sp.parent().width());
    },
}

$(function (){
    VPDetail.init();
})

$(".add1").click(function () {
  $('.add1').css('display', 'none');
  $('.added1').css('display', 'block');
});

$(".add2").click(function () {
  $('.add2').css('display', 'none');
  $('.added2').css('display', 'block');
});

$(".added1").click(function () {
  $('.added1').css('display', 'none');
  $('.add1').css('display', 'block');
});

$(".added2").click(function () {
  $('.added2').css('display', 'none');
  $('.add2').css('display', 'block');
});

.color-block {
    padding: 24px;
    background: #08e8de;
    border-radius: 10px;
}

.cart-block {
    padding: 24px;
    background: #8A2BE2;
    border-radius: 10px;
}

.add1, .add2 {
  height: 300px;
  cursor: pointer;
}

.added1, .added2 {
  cursor: pointer;
  height: 150px;
  display: none;
}

.package-detail-info {
  margin-top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<div class="row margin-block-small pt-4">
    <div class="col-12 col-md-8 col-lg-9">
        <h1 class="h2"><strong>Package</strong></h1>
        <div class="vp-tickets js-vp-tickets">
            <div class="mb-3"></div>
            <div class="please-select-items alert alert-info"><i class="fa fa-info-circle"></i> Please select items</div>
            <div class="color-block mb-4" id="ticket-1">
                <div class="item">
                    <div class="add1">Add 1</div>
                </div>
            </div>
      <div class="color-block mb-4" id="ticket-2">
                <div class="item">
                    <div class="add2">Add 2</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4 col-lg-3 js-column-to-scroll-block" style="">
        <div class="package-detail-info">
            <div class="js-real-position" style="">
                <div class="js-static-position static-position" style="top: 0px; position: static; width: 337.25px;">
                    <div class="vp-small-order-info cart-block mb-3">
                        <div class="js-selected-info"></div>
                        <div><small>Options:</small></div>
            <div class="added1">Added 1</div>
            <div class="added2">Added 2</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row margin-block-small">
    <div class="col-12 col-md-8 col-lg-9 js-column-to-scroll-block-additional">
        <div style="height: 1000px; background: blue;"></div>
    </div>
</div>

from The block is cut off when scrolling a fixed element on the page