Image
Direct link to the article Fixed Headers, On-Page Links, and Overlapping Content, Oh My!

Fixed Headers, On-Page Links, and Overlapping Content, Oh My!

Let’s take a basic on-page link:

<a href="#section-two"Section Two</a

When clicked, the browser will scroll itself to the element with that ID: <a href="#section-two">Section Two</a>. A browser feature as old as browsers themselves, just about.

But as soon …

Image
Chris Coyier on Updated on
Image
Direct link to the article Using IntersectionObserver to Check if Page Scrolled Past Certain Point

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)
Image
Chris Coyier on Updated on