How can I toggle a class based on scroll direction when an element is barely visible using Intersection Observer?

Below is one approach to fine‑tuning your Intersection Observer so that the callback fires when your target element is just barely visible at the bottom. The idea is to adjust the observer’s “viewport” using the rootMargin and then use the element’s boundingClientRect to decide when to add or remove your class.

For example, you can set a negative bottom margin so that the observer “thinks” the bottom of your viewport is a bit higher than it really is. This makes the callback fire when the element is almost leaving (or entering) at the bottom:

---

Improved JavaScript Example

JAVASCRIPTCopied
const options = {
  root: null,
  // Set a bottom margin to trigger when the element is 100px into the viewport from the bottom
  rootMargin: '0px 0px -100px 0px',
  // Use a low threshold so that any visibility triggers the callback
  threshold: 0
};

const observer = new IntersectionObserver(([entry]) => {
  const button = document.querySelector('button');
  // entry.boundingClientRect gives the element's position relative to the viewport
  // Check if the bottom of the element is near the viewport bottom.
  if (entry.isIntersecting && entry.boundingClientRect.bottom <= window.innerHeight) {
    // Element is just barely visible at the bottom; add the class (scrolling down)
    button.classList.add('hidden');
  } else {
    // Otherwise, remove the class (scrolling up or fully in view)
    button.classList.remove('hidden');
  }
}, options);

document.querySelectorAll('h2').forEach(el => observer.observe(el));

---

Explanation

1. Adjust rootMargin:
   By setting
   rootMargin: '0px 0px -100px 0px'
   you are effectively moving the bottom boundary of your observer’s viewport 100px higher. The observer will fire its callback when your element reaches this “adjusted” bottom edge.

2. Threshold:
   Using a threshold of 0 means that any appearance of the element in this adjusted viewport will trigger the callback.

3. Deciding When to Toggle:
   In the callback, we check if the element is intersecting and whether its bottom edge is at or above the actual viewport bottom. When both are true, it means the element is just barely visible from the bottom, so we add the class (for example, to hide the button as you scroll down). Otherwise, we remove the class (for instance, if it’s coming from above or fully in view).

Adjust the values (e.g. the -100px) as needed so that the toggle happens exactly when you consider the element “barely visible.” This gives you more control over the timing compared to relying solely on the threshold value.