Skip to main content
CSS is fun and cool and I like it.
Article

Sticky Table of Contents with Scrolling Active States

Say you have a two-column layout: a main column with content and a sidebar. Say it has a lot of content, with sections that requires scrolling. The sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that content in the main column. A fairly common pattern for documentation.

Bramus Van Damme has a nice tutorial on all this, starting from semantic markup, implementing most of the functionality … Read article “Sticky Table of Contents with Scrolling Active States”

Article

An Explanation of How the Intersection Observer Watches

There have been several excellent articles exploring how to use this API, including choices from authors such as Phil Hawksworth, Preethi, and Mateusz Rybczonek, just to name a few. But I’m aiming to do something a bit different here. I had an opportunity earlier in the year to present the VueJS transition component to the Dallas VueJS Meetup of which my first article on CSS-Tricks was based on. During the question-and-answer session of that presentation I was … Read article “An Explanation of How the Intersection Observer Watches”

Article

A Few Functional Uses for Intersection Observer to Know When an Element is in View

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that arsenal. Observers are objects that spot something in real-time — like birdwatchers going to their favorite place to sit and wait for the birds to come.

Different observers observe different things (not everyone watches hawks).

The very first observer I came to know was the Mutation Observer that looks for changes to the DOM … Read article “A Few Functional Uses for Intersection Observer to Know When an Element is in View”

Article

Using IntersectionObserver to Check if Page Scrolled Past Certain Point

When a web page scrolls, that’s a DOM event. I can find out how far a window has scrolled at any time with window.scrollY. I can listen for that event and get that number:

window.addEventListener("scroll", () ={
  console.log(window.scrollY)
});

Let’s say I want to know if the user has scrolled down 100px or more. I could test and see by seeing if window.Y 100. Here I’ll log if we are or aren’t:

window.addEventListener("scroll", () ={
  if 
Read article “Using IntersectionObserver to Check if Page Scrolled Past Certain Point”
Link

IntersectionObserver comes to Firefox