Как переместить элемент вертикально при прокрутке, но только в соответствующем контейнере BS4

Question

В контейнере BS4 у меня есть блок div.Мне бы хотелось, чтобы этот блок div вместе с вложенным содержимым прокручивался во время прокрутки, но при этом ограничивался соответствующим контейнером BS4.В идеале, он остановился бы на заданной высоте (в обоих направлениях Y) внутри контейнера BS4. ссылка на пример изображения .

Элементом div, который я хочу перемещать вертикально при прокрутке, является id = "solutions-container" внутри <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6"></div>

В идеале, яЯ ищу ванильное решение для кода JS, так как я все еще изучаю все аспекты бизнеса.

Я включу соответствующий раздел HTML-кода веб-страницы здесь.CSS будет на скрипке вместе с некоторым неполным JS, потому что я не уверен, что делать дальше.

http://jsfiddle.net/25fnba7o/1/

<!-- SECTION 2 --> 
<!--PRODUCTS AND SERVICES SECTION-->
<div class="products-services-container container-fluid">

    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
            <div class="product-image-container1">
              <img id="prodimg1" class="product-images prodimg1 img-fluid"src="images/Production-icons/cnc.png" alt="">
              <img id="prodimg2" class="product-images prodimg2 img-fluid" src="images/Production-icons/Sand-casting.png" alt="">
              <img id="prodimg3" class="product-images prodimg3 img-fluid"src="images/Production-icons/cnc.png" alt="">
              <img id="prodimg4" class="product-images prodimg4 img-fluid" src="images/Production-icons/Sand-casting.png" alt="">
              <img id="prodimg5" class="product-images prodimg5 img-fluid"src="images/Production-icons/cnc.png" alt="">
              <img id="prodimg6" class="product-images prodimg6 img-fluid" src="images/Production-icons/Sand-casting.png" alt="">
            </div>
        </div><!--/ .col -->
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
            <div id="solutions-container" class="solutions-container">
                <!--THE BLACK IN THE BLUE BLOCK (div)-->
                <div class="solutions-inside">
                    <h3 class="solutions-header text-left">Our Solutions</h3>
                    <h5 class="solutions-para text-left">
                        CNC Precision Machined Components Assemblies

                        High Pressure Die Castings

                        Grey & Ductile Iron Castings

                        Steel Castings

                        Investment Precision Castings

                        Aluminum Castings

                        Bronze and Brass Castings

                        Forged Components

                        Sheet Metal Components
                    </h5>
                </div><!--/ .solutions-inside -->
            </div><!--/ .solutions-container -->
        </div><!--/ .col -->
    </div><!--/ .row -->

</div><!--/ .container-fluid -->

Answer 1

Хорошо, я предполагаю, что проблема в том, что я не могу использовать родительский контейнер BS в качестве своего рода позиции по умолчанию.Вместо этого я добавил свойство pageYoffset, чтобы определить, когда я хочу прокрутить, а когда остановиться.Думаю, мне придется немного подправить это, когда я перейду на меньшие экраны, но сейчас я счастлив.

Вот код JS и класс, который я добавил, чтобы заставить вещи работать.

window.addEventListener("scroll", function() {
    var solutionsContElement = document.getElementById("solutions-container");
    let minPosition = 1400;
    let maxPosition = 3000;

    if (window.pageYOffset > minPosition ) {
        solutionsContElement.classList.add("sticky");
    } else if (window.pageYOffset > maxPosition) {
        solutionsContElement.classList.remove("sticky");
    }
});

И CSS для класса "липкий".

.sticky {
    position: sticky;
    top: 20vh;
}