Agfdhyk

Within a BS4 container, I have a div box. I would like this div box, along with the nested content, to scroll along while I am scrolling, however confined to the respective BS4 container. Ideally, it would stop at a predetermined height (both Y directions) within the BS4 container. link to example image.

The div element that I want to move vertically upon scrolling is the id="solutions-container" inside <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6"></div>

Ideally, I am looking for a vanilla JS code solution, as I am still learning the ropes & knots of the business.

I'll include the relevant section of the webpage html code here. CSS will be on fiddle along with some incomplete JS because I am not sure on how to proceed.

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 -->

Ok, I guess the problem here is that I can't use the parent BS container as a sort of default position. Instead, I added the pageYoffset property as to define when I want to scroll along and when to stop. I guess I will have to twig that a bit when I change to smaller screens, but for now I am happy.

Here is the JS code and the class that I added to make things work.

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");

    }

});

And the CSS for the class "sticky".

.sticky {

    position: sticky;

    top: 20vh;

}