Ways to vertically shift an element while scrolling, exclusively within its corresponding BS4 container

Inside a Bootstrap 4 container, I have a div box that I want to scroll along with the nested content as I am scrolling. However, I want this movement to be confined within the boundaries of the respective Bootstrap 4 container. Ideally, I would like it to stop at a predetermined height in both Y directions within the Bootstrap 4 container. See example image here.

The specific div element I want to move vertically while scrolling is identified by the id "solutions-container" located inside 

<div class="col-sm-12 col-md-6 col-lg-6 col-xl-6"></div>

Ideally, I prefer a vanilla JavaScript solution as I am still in the learning process.

You can find relevant sections of the webpage's HTML code below. The CSS will be available on fiddle along with some incomplete JS code due to uncertainty in how to proceed.

Link to JSFiddle

<!-- 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 -->
javascripthtmlcssbootstrap-4

Answer №1

It seems like the issue here is that I can't rely on the parent BS container for a default position. Instead, I've incorporated the pageYoffset property to determine when to scroll and when to stop scrolling. I might need to adjust this for smaller screens later on, but for now, it's working well.

Below is the JavaScript code and the added class that enabled everything to function smoothly.

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

Here's the CSS for the "sticky" class.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Center-align text points on a webpage using a bootstrap theme

Using the bootstrap creative theme, I am attempting to create a list of points with the md-bootstrap check fa icon. Here is how it currently appears: https://i.sstatic.net/7cgbG.jpg My goal is to center the text on the page while aligning the start of e ...

htmlcssbootstrap-4

Updating the background image of individual users in a Laravel blade template in real-time

I'm working on an application with different types of users, and each user has a unique background image for their wall similar to Facebook. However, I am struggling to figure out how to dynamically change the background image for each user. The image ...

phpcsslaravel-5

What is the most optimal method for utilizing an IPC listener within an Electron application for enhanced performance?

I have over 30 IPC listeners in my electron application, and I'm considering which approach is better for performance optimization. One option is to implement each IPC listener separately: ipcMain.on('appLanguageChange', (event, data) => ...

javascriptelectronipcevent-listener

Cursor vanishes until mouse movement detected (Chrome browser)

In the HTML page I created, the mouse cursor is initially set to none. However, there are certain circumstances where I need it to switch to crosshair. The issue I am facing is that the cursor does not appear unless the user moves the mouse. If the mouse r ...

htmlcss

Setting a global variable to control the visibility of the primary Navigation Menu

Implementing a log-in screen in my Angular app has presented me with the challenge of hiding the main navigation bar while the log-in screen is active. Once the user successfully logs in, I need to display the main nav again. Currently, the main nav is p ...

javascripthtmlcssangularjs

Frontend encountering a 'io is not defined' error in NodeJS environment

While running my nodejs app with nodemon on localhost, I encountered an issue where socket.io was not displaying on the frontend. Additionally, when trying to access /socket.io/socket.io.js at the end of the URL, no socket library was appearing. The error ...

javascriptnode.jssocketsheroku

What is causing the Denial of Service in react-svg-loader version 3.03 - Could it be related to css-what

An issue has been identified with React solution, showing a high vulnerability in npm-audit. The vulnerability is related to Denial of Service in react-svg-loader version 3.03 due to css-what. What potential solutions exist for this issue? Specific detai ...

javascriptnode.jsreactjssecuritysvg

Display a pop-up window using a Bootstrap modal at random intervals

I have created a website that features a picture with various pop-up windows designed using bootstrap modal pop-ups. The image contains 34 clickable leaves, each triggering a different pop-up window when clicked. My goal is for a random pop-up window out ...

javascriptjquerycsstwitter-bootstrap

Unable to retrieve data from mysql using javascript and ajax

I am having trouble retrieving data from a MySQL database using AJAX. I have tried adapting my old AJAX code that worked fine in another project, but it doesn't seem to be working here. Here is the JavaScript function I am using: var text1 = documen ...

javascriptphpajax

Text gently appearing and disappearing within a block

I’m looking to create a smooth fade effect for the content inside a block that is being dynamically changed by script. Instead of an instant change, I want the old content to fade out and the new content to fade in gradually without using jQuery — just ...

javascripthtmlcssfade

Mobile devices are not compatible with the canvas

After developing an application with Ionic Framework, I incorporated canvas for image cropping. The functionality worked seamlessly on my browser. However, when testing the app on a mobile device, I encountered issues: Does anyone have insight into why t ...

javascriptimage-processingmobilecanvasionic-framework

Tips on displaying various data when hovering over a menu in Laravel

In my project, I have a category structure that includes unlimited subcategories. To display these categories in my menu, I am utilizing the return method with id and parent_id. Below is the code snippet from my CategoryController to retrieve the main ca ...

javascriptphpjquerylaravel

Is NextJS on-demand revalidation compatible with Next/link?

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#on-demand-revalidation According to the NextJS documentation, it appears that on-demand cache revalidation should function properly with regular <a> tags and when t ...

javascriptreactjsnext.jscache-control

Having difficulty accessing the selected input value from window.localstorage

<script> (function(window, document, undefined) { function saveFormData(event) { if(event.target.type=='checkbox' || event.target.type=='radio') { window.localStorage.setItem(event.target.id, event.target. ...

javascriptjqueryhtml

Is there a way for me to adjust the typography background based on its current status?

Is there a way to dynamically adjust the background color of text based on the status value? Currently, when the status is pending, the background color defaults to yellow. For example, if the status changes to complete, I want the background color to ch ...

javascriptreactjsmaterial-uimern

Troubleshooting the Cross-Origin Resource Sharing Problem in Angular and

I had my client hosted on localhost:8080/ and the server on localhost:44302/ I am attempting to connect to my backend, but I keep encountering CORS issues. Here is my Angular http request: $http.post(url, data, { headers: { ' ...

javascriptc#angularjscors

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

javascriptcssangularjsangularjs-ng-repeat

Placing buttons on top of a video within a div container

I am facing a challenge with implementing custom controls on a video embedded in my webpage. I have tried setting a div to absolute position for the buttons, but they are not clickable. Is there a way to achieve this without using jQuery? I need the butto ...

javascripthtmlcssbuttonvideo

Implement automatic data replacement using PHP and MySQL triggers

The code provided below pertains to postar.php file include "conexao.php"; $consulta = mysqli_query($conexao, "SELECT titus.titus, titus.des, titus.link from titus"); while($postagem = mysqli_fetch_object($consulta)); echo "<d ...

phphtmlmysql

What effect does the passing of primitive types into function.apply() or function.call() have on JavaScript's behavior?

When a primitive type such as a string or number is used as the this subject in a function call (such as the first argument in either function.call() or function.apply()), the primitive type is converted to its object equivalent (for example, a string beco ...

javascript