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

【问题标题】：How to move an element vertically on scroll, but only in respective BS4 container如何在滚动时垂直移动元素，但仅在相应的 BS4 容器中
【发布时间】：2018-11-22 05:04:51
【问题描述】：

在一个 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 一起出现，因为我不确定如何进行。

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

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案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;
}

【讨论】：