WEBVTT

00:00:07.380 --> 00:00:13.290
In this video we're going to learn how to use the bootstrap scrolls by plugging in to target sections

00:00:13.290 --> 00:00:17.220
of the web page based on the scroll position.

00:00:17.700 --> 00:00:20.160
So with this example you can see just the nav bar.

00:00:20.170 --> 00:00:29.270
It will also have dates based on the scroll position telling which section of the page we are in.

00:00:29.290 --> 00:00:29.800
OK.

00:00:29.920 --> 00:00:39.330
To quote links that refer to sections of the web page and we can see that when we achieve these quote

00:00:39.330 --> 00:00:43.330
position these links are highlighted.

00:00:43.590 --> 00:00:50.870
If the corresponding if you are in the corresponding section of the of the page.

00:00:50.910 --> 00:00:54.000
So this creates an example just like this one.

00:00:54.480 --> 00:00:58.780
So first let's use the same nav bar.

00:00:59.340 --> 00:01:12.180
We have created in our nav bar section so we can copy the code from this file and places here is change

00:01:12.270 --> 00:01:19.850
the title to scroll spy again.

00:01:20.370 --> 00:01:22.230
OK.

00:01:23.850 --> 00:01:30.190
And also let's get rid of the contents in the container.

00:01:30.930 --> 00:01:37.040
So we are going to do we going to create three sections one section for all products.

00:01:37.050 --> 00:01:39.700
Another one if help and another one for departement.

00:01:39.780 --> 00:01:40.200
Okay.

00:01:40.350 --> 00:01:45.400
And then we get a link or each section to one of these links so.

00:01:45.950 --> 00:01:49.050
So we're going to have an H for.

00:01:49.400 --> 00:01:50.020
OK.

00:01:50.040 --> 00:01:56.560
For all products going to give it an ID.

00:01:56.730 --> 00:01:59.990
All products.

00:02:00.450 --> 00:02:07.850
And then they have a few paragraphs of about me some techs.

00:02:10.200 --> 00:02:26.220
OK let's create another one ok excuse and Id help some folks that help is good for another one

00:02:29.220 --> 00:02:30.570
ID Department

00:02:32.770 --> 00:02:35.220
.

00:02:36.170 --> 00:02:39.150
Let's play some text deps.

00:02:40.250 --> 00:02:51.150
OK so now we were going to add a couple of data attributes to the elements we are spying on.

00:02:51.150 --> 00:02:53.130
So the enemy is we spying on is

00:02:56.820 --> 00:02:59.380
the container container.

00:02:59.500 --> 00:03:04.180
But before we do that let's just say some styling.

00:03:04.800 --> 00:03:05.510
OK so let's

00:03:08.830 --> 00:03:14.460
let's change the height of the container and limited to

00:03:18.030 --> 00:03:27.530
let's say 300 pixels for example and also listed the over all two.

00:03:28.410 --> 00:03:31.680
OK.

00:03:32.340 --> 00:03:33.200
All right.

00:03:33.390 --> 00:03:41.640
So then we're going to have a couple of data attributes so the first one is going to be a data supply

00:03:41.660 --> 00:03:42.570
.

00:03:43.190 --> 00:03:47.550
As we said to scroll.

00:03:48.580 --> 00:03:50.200
OK.

00:03:50.250 --> 00:03:57.460
Now the other one is going to be a data targets.

00:03:57.590 --> 00:04:05.990
Are going to say to the ID of our nav bar all the links as we of course there are inside the numbers

00:04:05.990 --> 00:04:07.990
so we're just going to give the idea of that number.

00:04:08.280 --> 00:04:12.650
So first let's check if you have an ID number.

00:04:13.020 --> 00:04:15.870
We all have an ID on an ID.

00:04:15.900 --> 00:04:20.390
My love bug.

00:04:21.110 --> 00:04:21.510
OK.

00:04:21.520 --> 00:04:23.800
And you can use that ID.

00:04:24.540 --> 00:04:25.770
Our data targets.

00:04:25.880 --> 00:04:29.840
So we are targeting the elements of ID Mynah.

00:04:30.290 --> 00:04:31.410
OK.

00:04:32.340 --> 00:04:34.500
And finally let's go to

00:04:37.620 --> 00:04:43.100
these links and link them to our sections.

00:04:43.170 --> 00:04:49.810
The first one is all products and we'll link that to each section.

00:04:49.830 --> 00:04:59.940
All products using the idea of the head and lead to really Same thing with Hill and departments

00:05:05.250 --> 00:05:07.530
and it's refresh the page

00:05:13.380 --> 00:05:15.280
and make sure it is working.

00:05:15.580 --> 00:05:23.430
Yes he's working so he can see that the number of dates based on the scroll position.

00:05:23.550 --> 00:05:25.800
OK.

00:05:27.830 --> 00:05:28.270
OK.

00:05:28.380 --> 00:05:37.470
Now let's write a simple javascript code so that we can change the class of our logon button whenever

00:05:37.470 --> 00:05:40.730
the number of updates.

00:05:41.130 --> 00:05:41.610
So

00:05:45.410 --> 00:05:52.910
it's like our scripts just before the end of the body elements.

00:05:55.810 --> 00:05:56.970
OK.

00:05:57.430 --> 00:06:07.500
So we're going to access or not but using its ID.

00:06:07.770 --> 00:06:08.260
OK.

00:06:08.300 --> 00:06:12.780
And we're going to use the on method.

00:06:13.380 --> 00:06:14.500
OK.

00:06:14.520 --> 00:06:18.880
So if you remember the old method will lead a couple of parameters.

00:06:18.960 --> 00:06:24.700
So the first one is going to be the events and then the second one is the function executes for that

00:06:24.760 --> 00:06:25.480
event.

00:06:25.650 --> 00:06:35.800
So Evanthia is going to be activates both B as a scroll.

00:06:36.920 --> 00:06:39.770
OK.

00:06:40.680 --> 00:06:45.120
And it is right over function.

00:06:45.550 --> 00:06:50.440
So we don't have any parameters there.

00:06:53.320 --> 00:06:55.340
OK so we are going to be doing.

00:06:55.440 --> 00:07:02.410
So we you to access the logging button so we can use we can access the logon using its clus because

00:07:02.420 --> 00:07:04.590
it's only a button of close button.

00:07:04.740 --> 00:07:06.940
Success.

00:07:07.020 --> 00:07:07.410
OK.

00:07:07.470 --> 00:07:26.450
So let's see who's using both success and let's change the class of the button to BT between wanting

00:07:27.150 --> 00:07:31.090
using the toggle class method.

00:07:31.470 --> 00:07:33.080
OK.

00:07:34.830 --> 00:07:36.370
So it's truly good.

00:07:36.600 --> 00:07:42.480
Between wanting to save and refresh the page.

00:07:42.480 --> 00:07:45.270
So no know if we scroll

00:07:51.540 --> 00:07:57.180
and take words with you.

00:07:57.660 --> 00:07:59.160
OK.

00:07:59.200 --> 00:07:59.740
Function

00:08:03.920 --> 00:08:05.140
OK.

00:08:05.160 --> 00:08:09.170
So you should be working.

00:08:09.420 --> 00:08:10.370
Here we go.

00:08:10.520 --> 00:08:11.260
So.

00:08:11.490 --> 00:08:21.690
So you can see that's the class of the person changes to BT and wanting and then back to BT unsuccess

00:08:22.350 --> 00:08:24.680
whenever the number of dates