Hello, in this video, I am going to show you how to implement a scroll spy and bootstrap.
So let me show you want to scroll spying by going to the official bootstrap API guide to scroll down
where you got this example in a bar.
That's the example that will be implementing a scroll down.
And you can see when we go to a certain particular different section of it's a highlight which one we're
on and we're like the one that's marked as one of part of the dropdown to go to.
And there we go and verify.
Pretty cool.
You can implement to use a nested nav as well.
You can implement it using a list group.
I recommend that you have a go at all the different ways of doing it, but we're going to be using a
NAV.
So let's go over here.
First of all, we need to add some Cyesis if you have a separate designated access file for this particular
page.
Feel free to use that one because it's very basic.
I'm just going to keep you on the same page.
So you need to make the body position relative or, you know, using it with an upvote, but it just
doesn't work very well.
And I'm going to do container
margined, top of 200 pixels.
Reason I'm doing that will be putting the NABA also forgot to mention of covered nav bars and tabs in
a separate video.
So feel free to check that video out.
They're going to be going over the nav part of it pretty quickly just because I've covered it in a separate
video.
OK, the nabob will be here at the start of the body.
And I don't know why bootstrappers like this, if you just put a nabob there, this content, the container
where your main body of your website will be, gets overlapped by this.
So it's this start at the top Bonalbo stuff at the top.
And the Nebojsa has a great asset index next basically on top of it.
So we want to just sort of, you know, by doing margined top, we are moving this down a little bit.
We could imagine that bottom on the number that that's the only reason.
Yeah, OK, so we also need to in the body with data dashes by scroll data dash all that equals hash
tag number.
So this is a number that we are going to create that's going to have an idea of epic nav, but we have
not created that yet, but we will literally start doing that now.
The NAV
already equals nav ball.
Plus, you never know, Bardash liked big Dutch Light, Dutch free Dutch top, OK?
And next hour we're going to do is just pull up a toy store.
Hidden thing here, you know, an icon, an image that's totally up to you to brand a Taraf Prakash
so it doesn't go to a different page or website, but you naturally would make that go to a different
page or website, usually by the homepage of your website.
Next, what we are going to do inside the knife is put a on order list.
So on the list and this class now of dash tells
list item.
This is going to have a class of NAV Dutch item
in here.
Another class called NAV Dutch link, HSF equals hash tag Batman.
So this is going to be a section that we'll navigate to and we'll get them an image of the Internet
as some text basically to describe a few different of my favorite characters.
And those would be the different sections that will be scrolling through.
And if that suits, we need as many of that you want on.
I'm a total bear in mind, because you know, the number we have certain size, if you put too many,
you can look very good.
You're still going on multiple lines.
So just bear in mind this one
is not going to be Yoda and it's going to be Anakin.
Got one thing in here.
We need to put the text up here, because if you click that and go to that section at well, you'll
have to just scroll and see the map always keeping up where you are on the page.
That's totally up to you.
OK, so now that we've done that in our container, we can actually implement the content.
If we look at it now, this is what we get.
So we want to be able to click to the scroll through these and actually go to the particular page,
I mean, section on the page.
So in here we're going to have a div and this is going to be dated by.
He calls all data and all that is going to be equal hashtag.
NAV bar.
Like, so we're going to put data dash offset because calls zero and now we can start literally is now
content like formatting our Web page.
So we're going to have a page for time for anything you want.
And already and this idea is going to be B.S. So Batman, Superman, Yoda, Anakin and here would put
the name of the character.
We're going to have a P tag and we are going to an image.
Well, I'm in the class of the Budos.
One hundred.
This will just make it, you know, one hundred percent of the width of its parent container, which
in this case is Esteve.
And this will be relative to column 12.
So that way the images, regardless of the screen size, and we go to the original image of full size
and they don't go over the screen.
It is on the really small screen.
And FLC, we are we will implement that in a second, but that's basically the format for let me do
this.
This is going to be Superman.
This is going to be Ilda.
By duplicator to me, two and one to four would not be good for duplicated it too many times and I can
go back refreshed.
That's what we get if I just goes to the bottom one because there is no content here to let's actually
put some text and an image that we like in Batman.
We're going to grab ahold of this text.
So we're going to get an image I will be using the first one.
Put that there.
No, that's Superman.
Supermodel and supermodel.
Actually, let me show you something.
In this, why we copy the image of dress, it gives us this massive a one or two of them doing.
You might come across this and this one does.
So this is.
All right.
The other one will.
So let me show you.
We'll show you in a second.
Let me get the text, the description.
Man, I am excited to see the Snyder cut next year, see what they like and get your to vote on this
issue.
But we go get the text first.
Now, let's get an image for Yoda.
Good, the same if I was to copy me to dress this work in all right at the moment, but sometimes you
given me this massive, you know.
Though none is getting this massive data attribute, which is not what you want, and it just is massive
and well, next on American Pie, let me just.
OK, so let's get this text.
Let's put this
up there.
Let's get an image of Anakin Skywalker like this did to copy image dress.
Now, he may be all it had a noted possibly know him.
OK, so almost there.
So I just wanted to add a bit of JavaScript now.
So if we go down, open up some script tag again.
If you have a separate designated JavaScript file for this particular page, feel free to use that one.
I do not.
And this is a simple example.
So I will just put an ad eventually snap when we we saw the website do the browser.
We want to call this method resize window, which is what we're going to implement right now.
And the reason why we want to do here is basically refresh all our data.
Spilman, just because when we resizing, it's sometimes the scrolling position can be a bit off.
If we go from a big size and small size, it may not adjust accordingly.
So you want to just put this Savol data spy list equals square brackets, dot, dot or document dot
query.
Select all
that single quotation marks, web brackets, data that's by this is going to get any element with the
data by roll.
Attribute, which is, you know, the ones we want, should be good to clothe that now make sure you
close the quotation marks and so it doesn't automatically close, are they?
Make that mistake on a previous video and if it's in the video.
But that was no time wasted.
Well, I learned from it, so not completely wasted
due to the elements.
And now, in the sense they do not grow by don't get instant data by element, Doug Rethread.
There we go, we should be ready to see what we've got, make sure we get no errors in the console,
which we do not great, I selected by my father scrolling.
Once we get to the Sukma section, a supermax, we go to the Yota section theater to go to the bottom
of Skywalker and we can click on that particular one as well so we can resize it.
Batman and man, Yoda and Anakin.
So that's it.
If you have any questions, feel free to put me a message.
And as usual, I look forward to seeing you in the next awesome bootstrap video.