Rebuilding My Home on the Web - Update 1

This post is part of a series. You can view the other posts here:

• Original Post
• Update #1 (You are here)
• Update #2
• Update #3

I've recently updated the styling of my site header so that it fades in as the user scrolls. I had two ways that I could approach this:

1. Using the Intersection Observer API
2. Keeping track of the distance scrolled and apply CSS to hide and show based on that distance.

I first tried option 1, but ultimately decided against it. In order to wait to display the header until another element was visible (the next section on my page for example) I'd have to attach the observer to that element or one near it. There isn't a great way to do this that give consistent behavior across a wide variety of screen sizes without tightly coupling the navbar to other components in the page.

Instead I used a trick I found a while back on this great post by Matt Holland. I created a hook that throttled scroll events and would call provided callback with the previous and current distance scrolled from the top of the page. After implementing that it was just a matter of setting the distance I wanted to watch for and then toggle the flag to show the full navbar when the distance was exceeded. Added benefit with this approach: It also cleanly handles with a user scrolls back to the top of the page and hides the navbar. Neat!

Added some testing in my cypress setup to ensure that the element was behaving as intended with scrolling, and we're good to go. I also setup some basic accessibility testing for my app with the cypress-axe plugin and fixed a couple minor issues as a result. I plan to add more a11y testing on the component libraries, but having an overall check on the page is good for now. Checkout the changes here, here, and here.