Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So our page is looking really good. If we click on one of these images, everything looks great. Centered on the screen, top of the overlay. I can click on it to make it go away. But there's a little bit of a problem. If I click on one of these and I scroll the window. You can see that the overlay doesn't move with the scroll. And that looks a little funky so we're going to fix that next. Let me go back into my code. And right here I'm going to listen for a window event when somebody scrolls the window. So I'll say window, addEventListener, I'm looking for a scroll event.
And once that happens I'm going to execute a function. And I'm going to return false so that it bowls properly. And in here I'm going to first make sure that I have the element called myOverlay. Because I don't really want to adjust anything unless that element exists. So I'll say, myOverlay style top. And I'll set it to the window. Page YOffset plus pixels because this is CSS.
And then do the same thing for the overlay style left window page XOffset plus pixels. So let's save that and see if it's working. Back into our page, refresh the page, click on one of these elements and try scrolling the window. And now you can see that that moves with the scroll of the page. And let me go ahead and click that out. So sometimes you really have to pay attention to these kind of details by really messing around with the structure of the page to make sure you catch anything that may cause the user some grief.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104735 Viewers
56 Video lessons · 116619 Viewers
71 Video lessons · 85809 Viewers
131 Video lessons · 41055 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.