From the course: CSS: Scrolling and Parallax

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Adding classes when scrolling

Adding classes when scrolling - CSS Tutorial

From the course: CSS: Scrolling and Parallax

Start my 1-month free trial Buy for my team

Adding classes when scrolling

“

- [Narrator] Let's take a look at how we can do something useful with request animation frame. So, you may notice that if I scroll down further, my navigation doesn't clearly show up. Now, you may notice that it's still there, but it's really hard to see and that's because it doesn't have a background color. So, what I need to do is add a class into my nav, once the scroll is past this section right here, and we can do that using request animation frame. To set it up, I'm going to create a nav variable and I'll use document query selector. And I'm going to target the element with a class of site nav, and then I'm going to calculate the height of that element. So, I'll create a variable called nav height, and I'm going to set that to the nav scroll height, that's going to give me the height of the element. And what I can do then is I want to still get the sort of top location of the element that is the meet monsters…

Contents