Tips for swapping out a sticky element as you scroll

Question

Tips for swapping out a sticky element as you scroll

Context

As I work on developing a blog website, I aim to integrate a sticky element that dynamically updates according to the current year and month as users scroll through the content. This would provide a visual indication of the timeline for the listed blog articles.

When it comes to coding, my approach involves experimenting with HTML first, followed by CSS if necessary, and then JS as a last resort. I find this method efficient as it leverages existing features and minimizes the utilization of computing resources. However, I'm open to other perspectives on this practice.

Problem

The challenge lies in altering the style of elements when they become 'stuck'. In attempting this, I reviewed David Walsh's solution which utilizes IntersectionObserver, but encountered glitches when applying it to multiple elements simultaneously.

The primary issue I am facing is that when dealing with multiple entries, the script erroneously identifies an element as 'pinned' when it reaches the bottom border of the window.

Code

Below is a snippet of the code, along with a corresponding jsfiddle demo.

//Implementing David Walsh's code using a loop

document.querySelectorAll(".myElement").forEach((i) => {
const observer = new IntersectionObserver(([i]) => i.target.classList.toggle("is-pinned", i.intersectionRatio < 1),
{threshold: [1]});
observer.observe(i);
})

#parent { 
  height: 2000px; 
}

.myElement {
  position: sticky;
  top: -1px;
}

/* styles applied when the header is in sticky mode. The transition times contribute to an undesired effect */
.myElement.is-pinned {
  color: red;
  transition: color 0.3s, background-color 0.3s;
  background-color: orange;
}

<div id="parent">
  <!-- Including more than one 'hello' element. Adding br tags to introduce vertical space exceeding viewport height -->
  <br><br><br><br>
  <div class="myElement">Hello!</div>
  
  <br><br><br><br>
  <div class="myElement">Hello 2!</div>
  
  <br><br><br><br>
  <div class="myElement">Hello 3!</div>
  
  <br><br><br><br>
  <div class="myElement">Hello 4!</div>
  
  <br><br><br><br>
  <div class="myElement">Hello 5!</div>
  
  <br><br><br><br>
  <div class="myElement">Hello 6!</div>
  
  <br><br><br><br>
  <div class="myElement">Hello 7!</div>
  
  <br><br><br><br>
  <div class="myElement">Hello 8!</div>
</div>

javascript css sticky intersection-observer html-heading

Answer 1

Answer №1

It is important to note that you only require a single IntersectionObserver. If you have the same callback and options for multiple elements (which is the case here), you can use the same observer to observe() all of them. The only action that needs to be inside the loop is observer.observe(i);.

With this setup, the single observer can handle multiple entries simultaneously when scrolling up or down the page. It is necessary to iterate through all the observed entries in such scenarios.

Additionally, it is crucial to understand that the intersectionRatio does not differentiate between the top and bottom visibility of an element on the screen. Elements are considered 100% visible when they cross the threshold at either end of the box.

In most cases, you are interested in the elements at the top of the box. To address this, utilize the IntersectionObserverEntry object's boundingClientRect property to determine the current position of the element. This way, you can selectively toggle elements based on their visibility at the top.

To summarize, your code should look like this:

const observer = new IntersectionObserver((entries) => {
    for (let i of entries) {
        i.target.classList.toggle(
            "is-pinned", i.boundingClientRect.y < 0);
    }
}, {threshold: [1]});

document.querySelectorAll(".myElement").forEach(i => observer.observe(i));

However, there is still a potential issue with your implementation. In cases where the scrolling container is long enough to skip from the very top to the very bottom, some elements may transition from "0% visibility below the box" to "99% visibility at the top of the box," without triggering the IntersectionObserver callback. As a result, these elements do not receive the is-pinned class.

You can overcome this problem by adding another threshold of 0% to the existing observer to capture these transitions as well:

const observer = new IntersectionObserver((entries) => {
    for (let i of entries) {
        i.target.classList.toggle(
            "is-pinned", i.boundingClientRect.y < 0);
    }
}, {threshold: [0, 1]});

document.querySelectorAll(".myElement").forEach(i => observer.observe(i));

By incorporating this dual threshold approach, elements transitioning from visible to sticky or invisible to sticky will now correctly have their classes toggled.

Answer 2

It is important to note that you only require a single IntersectionObserver. If you have the same callback and options for multiple elements (which is the case here), you can use the same observer to observe() all of them. The only action that needs to be inside the loop is observer.observe(i);.

With this setup, the single observer can handle multiple entries simultaneously when scrolling up or down the page. It is necessary to iterate through all the observed entries in such scenarios.

Additionally, it is crucial to understand that the intersectionRatio does not differentiate between the top and bottom visibility of an element on the screen. Elements are considered 100% visible when they cross the threshold at either end of the box.

In most cases, you are interested in the elements at the top of the box. To address this, utilize the IntersectionObserverEntry object's boundingClientRect property to determine the current position of the element. This way, you can selectively toggle elements based on their visibility at the top.

To summarize, your code should look like this:

const observer = new IntersectionObserver((entries) => {
    for (let i of entries) {
        i.target.classList.toggle(
            "is-pinned", i.boundingClientRect.y < 0);
    }
}, {threshold: [1]});

document.querySelectorAll(".myElement").forEach(i => observer.observe(i));

However, there is still a potential issue with your implementation. In cases where the scrolling container is long enough to skip from the very top to the very bottom, some elements may transition from "0% visibility below the box" to "99% visibility at the top of the box," without triggering the IntersectionObserver callback. As a result, these elements do not receive the is-pinned class.

You can overcome this problem by adding another threshold of 0% to the existing observer to capture these transitions as well:

const observer = new IntersectionObserver((entries) => {
    for (let i of entries) {
        i.target.classList.toggle(
            "is-pinned", i.boundingClientRect.y < 0);
    }
}, {threshold: [0, 1]});

document.querySelectorAll(".myElement").forEach(i => observer.observe(i));

By incorporating this dual threshold approach, elements transitioning from visible to sticky or invisible to sticky will now correctly have their classes toggled.

Answer 3

Answer №2

Your last line in the JS code has a mistake. Correct it by replacing it with:

document.querySelectorAll(".myElement").forEach((item) => {
  const observer = new IntersectionObserver(
  ([entry]) => entry.target.classList.toggle("is-pinned", entry.intersectionRatio < 1), {
    threshold: [1]
  });
  observer.observe(document.querySelector(".myElement")); // Ensure to use the element instead!
})

Answer 4

Your last line in the JS code has a mistake. Correct it by replacing it with:

document.querySelectorAll(".myElement").forEach((item) => {
  const observer = new IntersectionObserver(
  ([entry]) => entry.target.classList.toggle("is-pinned", entry.intersectionRatio < 1), {
    threshold: [1]
  });
  observer.observe(document.querySelector(".myElement")); // Ensure to use the element instead!
})

Tips for swapping out a sticky element as you scroll

Context

Problem

Code

Answer №1

Answer №2

Similar questions

Trouble with clearTimeout function

What could be the reason behind ng-bind-html only displaying text and not the link?

Issue with Bootstrap checkbox/switch

Two-column dropdowns without the use of tables

The React-native application initialized using npx create-react-app encountered an error and could not launch

Margin not being applied to last element in parent - any ideas why?

Choose a different option when there is a change

Retrieving a single post from a JSON file using AngularJS

Incorporate a new node module into your Ember CLI application

Retrieving cookie from chrome.webRequest.onBeforeSendHeaders

Exploring Vue's reactivity using the composition API and cloning props

Using Node.js and TypeScript to define custom data types has become a common practice among developers

What is the best method for passing parameters from HTML to AJAX within code?

The ts-node encountered an issue with the file extension in this message: "TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension

The entry '0-0' already exists for the key 'local_part', please enter a unique value

Choosing the Right Project for Developing HTML/Javascript Applications in Eclipse

Create a customized menu with jQuery that disappears when hovered over

Exploring jQuery Mobile - What Causes an Empty State?

Having trouble with Angular2's Maximum Call Stack Exceeded error when trying to display images?

Check Image Dimensions prior to Image Loading