Ways to "halt" an element once reaching a different element while scrolling

Question

Ways to "halt" an element once reaching a different element while scrolling

I'm attempting to recreate the interactive widget titled "Engage. Involve. Connect" found on this webpage: . The concept involves the widget remaining fixed at the bottom of the page until the user scrolls, at which point it dynamically positions itself just above the text that reads "Experiences shape us."

Currently, I am developing a similar widget for my site located at . However, I am encountering challenges in ensuring the #widget / #unanchored element stops scrolling once it reaches the ".xp" class, contained within the "Experiences shape us." section.

This is the JavaScript code I am working with:

window.addEventListener('scroll', function() {
  var widget = document.getElementById('widget');
  var xpElement = document.querySelector('.xp');
  var widgetHeight = widget.offsetHeight;
  var xpPosition = xpElement.getBoundingClientRect().top;
  var windowHeight = window.innerHeight;

  var distance = xpPosition - windowHeight + widgetHeight;

  if (distance <= 0) {
    // Un-anchor and scroll with content
    widget.classList.add('unanchored');
  } else {
    // Keep anchored
    widget.classList.remove('unanchored');
  }
  
  // Dynamically set height of .xp element
  xpElement.style.setProperty('--xp-height', widgetHeight + 'px');
});

Here is the corresponding HTML:

<h3 id="widget" class="wp-block-heading has-text-align-center frontpage ticss-f97cde6b has-white-color has-text-color has-background" style="background-color:#00000087;font-size:39px">Engage. &nbsp; Involve. &nbsp; Connect.<br><span class="text frontpage2" style="font-weight: 200 !important;">We fuse Art + Engineering to create world-class experiences.</span><br><a href="https://williamh117.sg-host.com/#spacestop"><i class="arrow down"></i></a></h3>

And here is the CSS:

.unanchored {
  position: fixed !important;
  bottom: 300px !important;
  top: calc(100% - var(--widget-height) - 30px);
  left: 0 !important;
    margin-bottom:0px !important;
}

.xp {
  --widget-height: 30px;
  position: relative;
}

#widget {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f0f0f0;
  width: 100%;
  text-align: center;
  transition: bottom 0.3s ease-in-out;
    z-index:1000 !important;
    scroll-behavior: smooth !important;
}

Your advice and assistance are greatly appreciated. Thank you!

javascript html css wordpress scroll

Answer 1

Answer №1

If you're looking for a similar function, you can find it here: CodePen example

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .banner {
        width: 100%;
        height: 100vh; /* Note */
        background-color: #098;
    }
    .widget {
        position: relative; /* Note */
        z-index: 9;
        top: -200px; /* Widget Height */
        width: 100%;
        height: 200px;
        background-color: #0005;

        display: grid;
        place-content: center;
        color: #fff;
    }
    .content {
        position: relative; /* Note */
        margin-top: -200px; /* Widget Height */
        width: 100%;
        height: 1000px;
        background-color: #000;
        padding-top: 200px;
        color: #fff;
    }
    </style>
</head>
<body>
    <section class="banner"></section>
    <section class="widget">
        <h2>Widget Content</h2>
    </section>
    <section class="content">
        <div class="children">
            <h1>This is Title</h1>
        </div>
    </section>

    <script>
        function map_range(value, input1Start, input1End, input2Start, input2End) {
            const normalizedValue = (value - input1Start) / (input1End - input1Start);
            return input2Start + normalizedValue * (input2End - input2Start);
        }
        window.addEventListener('scroll', function() {
            const wantedHeightToEnd = window.innerHeight * 0.5; // want to end animation at middle of the screen
            if (window.scrollY < wantedHeightToEnd) {
                const value = map_range(window.scrollY, 0, wantedHeightToEnd, -200 /* Widget Height */, 0);
                document.querySelector(".widget").style.top = value + px;
            }
        });
    </script>
</body>
</html>

Keep in mind that the banner, widget, and following section are on the same level.

Answer 2

If you're looking for a similar function, you can find it here: CodePen example

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .banner {
        width: 100%;
        height: 100vh; /* Note */
        background-color: #098;
    }
    .widget {
        position: relative; /* Note */
        z-index: 9;
        top: -200px; /* Widget Height */
        width: 100%;
        height: 200px;
        background-color: #0005;

        display: grid;
        place-content: center;
        color: #fff;
    }
    .content {
        position: relative; /* Note */
        margin-top: -200px; /* Widget Height */
        width: 100%;
        height: 1000px;
        background-color: #000;
        padding-top: 200px;
        color: #fff;
    }
    </style>
</head>
<body>
    <section class="banner"></section>
    <section class="widget">
        <h2>Widget Content</h2>
    </section>
    <section class="content">
        <div class="children">
            <h1>This is Title</h1>
        </div>
    </section>

    <script>
        function map_range(value, input1Start, input1End, input2Start, input2End) {
            const normalizedValue = (value - input1Start) / (input1End - input1Start);
            return input2Start + normalizedValue * (input2End - input2Start);
        }
        window.addEventListener('scroll', function() {
            const wantedHeightToEnd = window.innerHeight * 0.5; // want to end animation at middle of the screen
            if (window.scrollY < wantedHeightToEnd) {
                const value = map_range(window.scrollY, 0, wantedHeightToEnd, -200 /* Widget Height */, 0);
                document.querySelector(".widget").style.top = value + px;
            }
        });
    </script>
</body>
</html>

Keep in mind that the banner, widget, and following section are on the same level.

Ways to "halt" an element once reaching a different element while scrolling

Answer №1

Similar questions

What are the steps to achieve a smooth transition from a background-image to transparency?

How to Call a Nested Object in JavaScript Dynamically?

Dealing with Inline Styling Woes

Updating the Backbone.js model within a MySQL database

An issue was encountered while trying to access ./node_modules/@esri/calcite-components/dist/custom-elements/index.mjs from 1:0-147

The table's content extends beyond the confines of the page

Converting text to icons and adding tooltips using only CSS

In need of styling text using CSS?

Issue with modal box not displaying properly when hidden div is within a for loop

Guide on installing React packages during runtime

Preview your uploaded image before finalizing

toggle between utilizing the page object API and the primary Nightwatch API

JavaScript: Collection of Pictures

Encountering an 'Undefined' error when trying to access data object values within the map function in a

Whenever I try to import a directory that contains modules, Webpack encounters an error

Is there a way to update the Angular component tag after it has been rendered?

Can you explain the significance of `window.jqueryFoo = false;`?

I am experiencing an issue with my jQuery loop code not functioning properly when using the .each method within the loop

Tips for updating the styleurls link dynamically by clicking a button and maintaining the changes

JavaScript Fullcalendar script - converting the names of months and days