- [Instructor] Scrollspy lets Bootstrap keep track of the scrolling of the page and modifies classes in an app according to the position of the scroll. So let's take a look at how that works. Now to use Scrollspy, you need to make sure that you add a data spy equals scroll attribute on the container of the element that you want to track scrolling in. Now that element also needs to have a position of relative. This is usually the body that gets this position. You also need to target the map element that you want Bootstrap to update with the data target and then the ID of this element and so usually this is the navigation that you want to track and you add an ID attribute to that navigation and then from the element that you are targeting scroll, you use this data-target equals ID.
It's going to make a lot of sense when we do an example. Now for navigation, this trick is not really going to make sense unless you change that navigation's positioning to fixed-top. We could do that with a Bootstrap class, now technically you could use the position sticky attribute but it doesn't have enough browser support so I would stay away from that. There's an option for specifying an offset and that can make up for the fact that when you use fixed-top, it takes that element out of the flow of the document, so you're going to make up some room with this data-offset attribute.
There are some other tricks that you need to do in order to make this look fantastic, so we'll take a look at that as well. So here I have a pretty simple example you can see that it's a navigation that sits at the top and I have some very basic content, really just a bunch of text on the page so what I want to do is modify this navigation so that it sits at the top, so let's go ahead and do that. We'll take this navigation, it's right here so I'm going to add the fixed-top class here.
So fixed-top and what that does is take the navigation out of the flow of the document, you can see that right now you can't see the top of that. And because of that, I'm going to need to add some style. So I'll do that, you really need to do that on a separate CSS file but we'll just go ahead and add an embedded style sheet with this style tag right here. For production I would obviously put this on a separate CSS file and then I need to add a little bit of padding at the top and I'll do 80px right here.
So that's going to take care of adding some spacing to the top of the page. And obviously I need to specify a selector, so I want to do that on the body and let's go ahead and save. You can see now that the Our Mission is in a little bit better position now with that fixed-top and now when I scroll this sort of stays up at the top of the page. So as you know, when you use navigation you can specify that one of the elements be active and the job of this Scrollspy component is to sort of automatically take care of that for you as you scroll the page.
Now you're going to notice that if I click on these elements, they are targeting the different places so when I click on Services it kind of scrolls to Services, when I click on Mission, it scrolls to Mission. There's a little bit of a problem because I've added this padding, we'll be taking care of that a little bit later. Alright so to make this scroll fix work I need to add something else to the body and that is going to be a position of relative, this is required for this element to work.
And then on the body tag itself, I need to add a data spy and it needs to say scroll and then a data target attribute that is going to target our navigation. I've given my navigation a ID of navbar-site so that's what I'm going to put on this target right here. Now my data target does need to have the pound sign in it, it's easier to forget that sometimes the data targets need to have this pound sign but the ID's don't.
So let's see if it's working now. And so now as you can see, as I scroll the page and I get close to my elements, the element will automatically become active, so that's sort of the same thing that happens if I add an active class, so if I say active right here then when I refresh this page, Mission will automatically be highlighted because it has the active class. And now as I scroll to the different elements, notice that the other classes become active on scroll.
So it's actually probably better to take this out right now so that it just happens whenever I scroll through the page. And Mission doesn't remain active and it's sort of just there as I scroll through the document. Now one more thing I need to do is to add an offset and that's because when I scroll you're going to notice that it's not until I get to this position right here that this mission activates, even though the headline is up here that's because of this 80 pixel panning that I have added.
So I need to make sure that I add another attribute to my body and it's going to be data offset of the same amount, so I'll do data offset of 80 and now when I save this, and the page reloads you're going to notice that mission is automatically active, that's because technically when this page loads, it's offsetting things by 80 pixels which means that now when we get to this position, this is already highlighted and if I scroll to Services you're going to notice that right about, right after this section right here, Services becomes active.
And it's really easy to style these in a different way if you want to, let's go to Staff, our staff here and there it is in Testimonials, same thing when we get to that page. It will automatically highlight, that's pretty cool. As I mentioned, the only problem we're going to have right here is that if I click on these notice that they're not adjusting to the offset, when you use this target of a hashtag, the page will automatically sort of jump to the position of this element.
Unfortunately though, that position happens to be placed at the very top of the page and because of our offsets that doesn't work. Now I could add a little bit of padding to every content element but that ends up looking kind of weird. So I've created a special gist for you with some code that you can use to fix this, so the special gist is at this URL it's a little bit of jQuery and what it does is it actually scrolls to a specific position, let's go ahead and copy this code right here.
I made the offset 70 so it's a little bit lower, but I think it looks a little bit better if the offset is a little bit different. So I'm going to paste this at the bottom, I'm going to create a script tag right here and paste that. Now this is going to take care of scrolling to a position. Now one thing that you notice about this page is that our script tag right here is actually calling the full version of jQuery. Most of the other pages that we've created in this course have been using the default jQuery slim which is a thinner version of jQuery, but it doesn't have all the features.
So let's go ahead and save this and see what this does. And now let's click on one of these you can see that it doesn't just jump, like the hashtag would, but it scrolls to position and it's looking like it's a little bit of a better effect I think. But just watch out that you're using the right version of jQuery, the full version will actually work and that's because this animate method doesn't work with jQuery slim and it doesn't have some of the other features that I'm using here.
So Scrollspy is a fantastic component, there is a lot of setup that you have to perform to get it to work just right, but I think it's well worth it, because this effect of automatically highlighting elements when you scroll and even the animation works really well on websites.
- Creating a basic template
- Reviewing basic styles and typography
- Using colors with Bootstrap
- Working with classes that help you deal with images
- Working with grid containers
- Offsetting columns
- Using list groups to style lists, buttons, and links
- Using breadcrumbs
- Reviewing layout components
- Using form styles
- Working with interactive components