From the course: JavaScript: Enhancing the DOM (2013)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Adjusting for scrolling
From the course: JavaScript: Enhancing the DOM (2013)
Adjusting for scrolling
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
What we'll build2m 16s
-
(Locked)
Adding a bubbling event listener4m 11s
-
(Locked)
Creating and styling an overlay with JavaScript4m 39s
-
(Locked)
Adding an image3m 48s
-
(Locked)
Resizing images in the DOM2m 59s
-
(Locked)
Centering an image2m 36s
-
(Locked)
Handling clicks1m 29s
-
(Locked)
Adjusting for scrolling1m 36s
-
Detecting and adjusting for a window resize2m 40s
-
(Locked)
-