way of knowing when certain elements come in and out of the viewport. So let's take a look at a very simple example of IntersectionObserver first. So let's go to our JavaScript here, which is empty right now. Let's grab the first section. So this section is called section1. So say section1 equals document.querySelector. And let's grab that. So it's called .section1. And let's make it an options object here, which is a param for IntersectionObserver. But for now, we'll make it empty.

And let's make it an options object here, which is a param for IntersectionObserver. But for now, we'll make it empty. So let's go ahead and create our first IntersectionObserver. Let's call it observer. It's a new IntersectionObserver. And it takes entries as a param. Okay, that's a callback. The second param is our options here. And now we can observe using the observe method. So we can say observer.observe, and we pass it in an element.

So after we scroll past here, I want this to be positioned fixed. Maybe I can zoom out a bit too. So let's change our IntersectionObserver to observe this pixel here instead of this section here. So that will be in our JavaScript. And let's just change this section one to document.querySelector. And that one I just made. So pixelToWatchOne. And now it should run whenever we scroll past this pixel here. So let's open up the console and we have this error.

And if I scroll up past it, it runs again as well. There we go. So like I said, I want to make this fixed. So let's do that first. I'm going to change this to the actual image. And I do have a class on that. It's called imageOne, I believe. Yep. So let's change that. So this would be imageOne.

So let's change that. So this would be image one. Okay. And let's make that element fixed. So I do have this class called fixed, which just sets the position to fixed. So let's add that. We can add an inline style as well, but let's do it this way for now. So section one image classList.add(fixed). Okay. And remember, you have to set a width here because it's out of the document flow and

Okay. And remember, you have to set a width here because it's out of the document flow and it's fixed. If you don't remember, let's just do that again. So let me just move this up. If I set it to position fixed, you won't see it anymore. You have to add a top value and also an explicit width. So I'm just going to add the width within the fixed class. So let's do that. Back to our CSS.

So let's do that. Back to our CSS. Let's add the explicit width here. Again, this isn't the cleanest solution. So if you're using this fixed utility somewhere else, this would not be a good choice, but for now it's fine. And we could put the top value in here too, but I'm just going to use JavaScript to add that. I think there's a reason for that as well, which I don't remember right now. So we can say sectionOneImage.style.

I think there's a reason for that as well, which I don't remember right now. So we can say section one image.style. This is to add an inline style. Set property, and we're going to set the top value to some value here. And I'm going to make it a variable because we're going to do this several times. So say topValue, and let's put it up here, say const topValue = '252px'; Okay. So let's see if this works. So I'm going to scroll up and refresh. And it's already fixed because our IntersectionObserver is running on page load.

Let's take a look at the Y value now. Since it's off the page, I'm thinking it should be a negative value. boundingClientRect, and there it is, negative 13. So we only want this piece of code to trigger if the Y value is less than zero. So let's wrap this in a conditional. So say if entries[0].boundingClientRect is less than zero, then go ahead and run this code. So let me just move this in there. And now hopefully it should be fixed after a certain point. So again, I'm going to scroll up, let's refresh, and it's no longer fixed up here.

show here. But after I reach this point, it will change to fixed. And that's what we want. Cool. So as I scroll back up, I want it to go back into the correct position and not be fixed anymore. So we can just add an else case here and remove the fixed class. So let's remove it. And now it should work. So fixed here.

Again, this isn't the cleanest solution. Okay. And let's add those in our JavaScript. So let's go back here. Let's add those images first. So section one or section two image and section three image. Okay. image two, image three. And let's start with the second one. Actually, let's name this observer one.

And let's start with the second one. Actually, let's name this observerOne. And this one's observerOne. Okay. And let's start with the second one. Let's change it to observerTwo. Okay. And we are observing the second pixel. So let's see if we can just do this again, but change it to sectionTwoImage. And let's see if this gets us anywhere.

So let's see if we can just do this again, but change it to section two image. And let's see if this gets us anywhere. So again, let's go up here. Changes to fixed for the first one. Let's see what happens when we pass the second point. Okay. So it does work. So I believe the first image is just behind this one and this one's on top. And let's do the same for the third. So let's grab this or duplicate this.

Cool. Okay. Now let's see if we can make the other images invisible to start with. Right now, as I scroll down, you'll see that this image still shows, which we don't want. So let's remove them or hide them at least. So I have this invisible class, which is just visibility: hidden. So let's add those on the other images to start. So let's say imageTwo and imageThree, let's say invisible. So here and also on imageThree, invisible. Okay.

again and happen in reverse. So same thing, but in reverse. So similar to how we change it back from fixed to a normal scrolling on the first example here, when we scroll up, we want to do the same thing, but make it fixed when we scroll up from this last section here. So let's try to do that. Let's go to observer3 and in here, instead of removing fixed, let's add fixed. And I think we need this top value as well. So let me just grab that from here and put it in here. Make sure it's sectionThreeImage.

So I showed here because I scrolled up and I scrolled back down. So just to make it clear up here, if I scroll up, nothing happens. But if I scroll back down, it's going to trigger that IntersectionObserver and show the second image. So let's go back to our code and let's go to observer2. So this is a section for scrolling up. So let's remove the invisible class. Let's make it fixed. And let's also give it that top value. Make sure it's section2.

But if we get that to trigger, so here or wherever it runs again, you'll see that it is intersecting. So let's try this last one right here, right here, actually. And isIntersecting is true. That means it is on the page. So let's only run this code here when we scroll up if it's intersecting. So yes, the code is getting very messy. But like I said before, this is just a proof of concept. And we're just trying to make it work for now. And in reality, you would spend some time to clean this up.

And we're just trying to make it work for now. And in reality, you would spend some time to clean this up. So entry zero is intersecting. Then run this code. Okay. And now it should not show up when we're up here somewhere. If I refresh many times, it does not show up. But it still might show up here like it does right here. So we have to add one more condition. So let's just add one more condition here.

So we have to add one more condition. So let's just add one more condition here. And let's say only run it if sectionOneImage has the invisible class on it. Okay. So that should get rid of this case. And it does. Cool. Yeah, I think we're good to go. Those are most of the cases, at least for this proof of concept. There probably is still some bugs, but we do have it working.

And back to the first image. Awesome. So there you have it. We recreated this scroll pin effect, making use of position: fixed and IntersectionObserver in JavaScript. Again, not the cleanest code, but it is working as a proof of concept. So I'm actually curious if this can be done easier with a library. And GreenSock does have one called ScrollTrigger. So be sure to check this out if you are curious.