3.2 Pinning a Menu

Hello, and welcome back. In this lesson, we are going to use the set pin method that we talked about in the last lesson. But we are going to use it for a different purpose. What I want to achieve in this lesson is when we start scrolling down, I want this top part of the menu bar to pin itself in place there at the top until we get to slide 2 and then we'll allow it to scroll up and off the screen. So, initially we're gonna see this logo with the menu below it and I didn't mean to click on that. Let's reload that frame. But when we scroll down to a certain point we want this logo to scroll out and disappear. But we want the menu below it to pin itself in place. And so we're going to set the pin in a slightly different way than what we've done before. So, let's start by creating a fork. I'm gonna click up here on the Fork button which just creates a new copy of our pin that we can work with without editing the original one. And, if we look in our HTML, we can see what we've done there. We've created a navigation element that has an h1 in it, and then below that it has an unordered list with an idea of main menu, and then below that we have our two slide sections, which are set up the same way that they were before. And then you can look through our CSS to see how we've styled everything, but now we're gonna jump into our JavaScript. And again what I wanna do is I wanna make our menu stick after the logo scrolls away or scrolls past the top edge of the screen. And the way we've done this before is by creating an offset for our scene that we've created. Well, this time instead of an offset, we're going to create a trigger element. And the way that works is we basically select a trigger element and when we scroll down or while we're scrolling down once our browser reaches that trigger element at the top of the screen, then that scene will be triggered. So, let's see what that looks like. We're gonna go into our JavaScript and just like before we're gonna create a new controller. So let's say var controller equals new ScrollMagic.Controller. And then we'll create our scene. So var, and let's just again call it scene equals new ScrollMagic.Scene and then inside the parenthesis for scene we need to include curly brackets and then will merge that second curly bracket. We're closing curly brackets down a couple of lines. And this time instead of using the duration property we're gonna use a property called trigger element with a capital E and then here inside quotation marks, we're going to write out the CSS selector for the element that we want to use as the trigger for this particular scene. So I want this menu to get pinned whenever our logo moves off the edge of the stage and our trigger hits or our menu excuse me hits the top of the scrollable or viewable area. So if we go into our HTML we can take another look at our nav element here. And you can see we have an h1 and then just after the h1, we have this unordered list, but we've wrapped that unordered list in a div called menu trigger and that's the element I wanna use as our trigger element. So I'm gonna point to this class of menu-trigger in our scene. So let's jump back into JavaScript and we'll set our trigger element equal to .Menu trigger. Since menu trigger is the name of the class we're calling it. .Menu trigger and then after that we'll type a comma, go down to the next line and then just like before, we're also going to have a duration. And here I'm going to set the duration to the same thing we've used before Window.height. And then just like we've done before I'm gonna go down after this scene, after the closing parenthesis for that scene, you'll notice I didn't put a semi-colon there because we're gonna add a pin to it. So we're just gonna say .setPin, with a capital P, and we're gonna set the pin in our menu. And again, if we go back to our HTML, we're gonna set the pin in this unordered list with an ID, excuse me, of main menu. So, we'll go back to our JavaScript and again, that's an IDs. So we're gonna say, main-menu and then just like before we're gonna take commas space and then inside a JavaScript objects notated by curly brackets. We're going to set push followers with a capital F equal to false. So push followers plural : space false, we have to make sure we spell that right. And then at the end of that line we'll put our semi colon. Now remember this scene is not going to work yet because we haven't added it to our controller. So let's give a couple of lines and let's point to our scene which we just called scene. And then we're going to say .addTo with a capital T and then inside parentheses the name of the controller we're adding it to, which we simply called controller. So let's see if that works. Now automatically we can see that something is going wrong here. Our menu has jumped down and separated itself from our website logo. Obviously, not what we wanted. Let's go and see what happens when we scroll you'll see that when our second slide comes into view it starts moving up with a second slide. So it's not quite what we're going for, we see that the pin is working. It's just not working in the right place. Well, there's another property of our scene that we haven't talked about yet. That's called trigger hook. So I'm gonna go to the next line after the end of the duration property. I put a comma there and in the next line I'm gonna create a property or call on a property called trigger hook. And I'm going to set that to a value of zero. Now, when our page reloads you can see that our menu is now back at the top of the screen and as I start scrolling down we see that it's now doing what we want. And the reason this works is because this trigger hook value is automatically set to a value called on center, which means that when your trigger element, this menu trigger class here. When that element reaches the center, the vertical center of the browser window then it's going to trigger the scene. And since our element was already near the top it just pulled it down to the center in order to get it to where it needed to be to trigger the scene. But when we set that trigger hook to a value of zero, we're telling scroll magic that we want that trigger to happen whenever our trigger element reaches the top of the browser window. So now when we scroll up, it hits the top of the browser window and it stays in place. And remember it's only staying in place for the duration that we set, which is the height of the window. So when our next slide comes on the green slide, you'll see that it pushes that menu off. And that's how you can create a menu that pins itself to the top of the browser window using Scroll Magic. So, let's save our work and we'll move on with the next lesson. Thank you for watching.