Question

在BS4容器中，我有一个div框。我希望此div框以及嵌套的内容在滚动时滚动，但仅限于各自的BS4容器。理想情况下，它将停止在BS4容器内的预定高度（两个Y方向）上。 link to example image。

滚动时要垂直移动的div元素是<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6"></div>内的id =“ solutions-container”

理想情况下，我仍在寻找香草JS代码解决方案，因为我仍在学习业务的精髓。

我将在此处包含网页html代码的相关部分。 CSS会与一些不完整的JS混在一起，因为我不确定如何继续。

<!-- 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”。

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

如何在滚动条上垂直移动元素，但仅在相应的BS4容器中

1 个答案: