WEBVTT 00:00:06.350 --> 00:00:13.740 In this video we're going to get used to the bootstrap it fixed plug in using this plugin we can fix 00:00:13.830 --> 00:00:18.110 a diff to a location on our Web page. 00:00:18.110 --> 00:00:23.140 You know one example we've got a list of NAV tabs on the left hand side. 00:00:23.580 --> 00:00:26.530 And of course our fixed diff. 00:00:27.060 --> 00:00:39.630 So each tab is linked to a header inside our fixed it and if we scroll down the list of nafs types is 00:00:39.630 --> 00:00:48.430 going to gets automatically updated depending on the scroll position. 00:00:48.540 --> 00:00:53.410 So let's go ahead and create a similar example using the fixed line. 00:00:53.910 --> 00:00:55.980 So first we're going to use the grid system 00:00:58.770 --> 00:01:09.990 to build a layouts such as the list is wrapped in elements or in a div of three columns and the fixative 00:01:10.050 --> 00:01:12.970 will take nine columns. 00:01:12.960 --> 00:01:20.300 So it create a row or div of all of class row. 00:01:20.480 --> 00:01:20.940 OK. 00:01:20.950 --> 00:01:23.960 And inside the div we're going to have a couple of days. 00:01:24.390 --> 00:01:35.130 So the first one which will run the list is going to have a class of column X is three for three columns 00:01:35.130 --> 00:01:35.180 . 00:01:35.220 --> 00:01:42.450 We're using X as because we want this lay out to work to be the same for all device sizes. 00:01:42.980 --> 00:01:44.150 OK. 00:01:45.010 --> 00:01:49.060 And then the second Dave is going to be fixed. 00:01:49.080 --> 00:01:57.930 Dave and I are going to give is a class of column X as mine for nine columns. 00:01:58.350 --> 00:02:01.050 So this populates the first div. 00:02:01.050 --> 00:02:05.540 So we're going to create a list. 00:02:05.610 --> 00:02:13.000 We're going to give is an id going to call it's my fix. 00:02:13.000 --> 00:02:20.720 So it's a list of naptimes sweetly the class love and love taps. 00:02:21.220 --> 00:02:28.970 Let's make the the tab stacked using the sex class. 00:02:29.460 --> 00:02:36.610 OK so let's create our list items. 00:02:36.780 --> 00:02:45.690 So first one is going to be Section 1. 00:02:46.240 --> 00:02:49.800 Typically that's Section 1 00:02:52.750 --> 00:02:56.690 and 2 3 00:03:00.020 --> 00:03:02.580 or 4. 00:03:03.540 --> 00:03:08.610 Ok so now let's populate our fixed diff. 00:03:08.820 --> 00:03:14.600 So each section consist of a header with a few paragraphs. 00:03:14.670 --> 00:03:16.830 So the first one is going to be 00:03:19.780 --> 00:03:37.660 able to add a section 1 is give us an ID Section 1 and lets the few paragraphs of content 1. 00:03:41.280 --> 00:03:44.040 OK so let's copy this with the other sections 00:03:47.730 --> 00:03:53.340 and let's change it to Section 2 Section 2 00:04:03.600 --> 00:04:07.120 Section 3 3 00:04:18.530 --> 00:04:19.230 4 00:04:30.540 --> 00:04:37.210 and finally Section 5 and 5. 00:04:38.060 --> 00:04:38.300 OK 00:04:43.840 --> 00:04:45.840 OK. 00:04:45.960 --> 00:04:54.270 Now let's link our enough tabs to these sections so each none of it's going to have an interest going 00:04:54.270 --> 00:04:56.450 to a header. 00:04:56.450 --> 00:04:58.830 The first one is going to Section 1. 00:04:59.520 --> 00:04:59.970 OK. 00:04:59.970 --> 00:05:02.700 And then next one section 00:05:05.310 --> 00:05:13.350 2 Section 3 and 4 and 5 00:05:20.390 --> 00:05:23.060 OK. 00:05:24.420 --> 00:05:25.750 All right. 00:05:25.810 --> 00:05:29.940 Now let's just style our list quickly. 00:05:30.160 --> 00:05:44.760 So get it signed the list using the axes the list of glass terms. 00:05:46.060 --> 00:05:47.860 OK let's said the 00:05:52.290 --> 00:05:59.400 lady said the with 0 2 it doesn't have any. 00:05:59.420 --> 00:06:09.740 But anyway let's have a border of one big pixel with the style to solve it. 00:06:09.910 --> 00:06:15.750 And also to see the color purple. 00:06:17.130 --> 00:06:18.580 OK. 00:06:19.270 --> 00:06:26.190 Also just to change the border radius and see three pixels on sites. 00:06:26.990 --> 00:06:29.690 OK. 00:06:30.580 --> 00:06:41.450 Now let's all the links inside oxy naptimes so so you can access the list of those terms. 00:06:41.800 --> 00:06:44.230 Then the list items of class active 00:06:49.570 --> 00:06:51.700 and then things. 00:06:51.760 --> 00:06:56.110 So let's give them a white color 00:06:59.650 --> 00:07:01.450 a purple background 00:07:01.450 --> 00:07:07.500 . 00:07:07.630 --> 00:07:09.880 All right. 00:07:11.710 --> 00:07:19.740 OK let's do the same styling for the estates of these links. 00:07:22.120 --> 00:07:30.730 OK so now let's build the fixed functionality so first of all we are going to go to the list. 00:07:31.480 --> 00:07:31.850 OK. 00:07:31.870 --> 00:07:35.540 And we're going to give it a data. 00:07:35.620 --> 00:07:37.970 Abuse is going to be data spy. 00:07:38.650 --> 00:07:42.130 OK that's we'll set to fixed up. 00:07:42.630 --> 00:07:43.130 OK. 00:07:43.210 --> 00:07:47.900 So this will make the list go to the top most position. 00:07:48.490 --> 00:07:50.110 OK. 00:07:50.280 --> 00:07:58.390 Also let's give the list a fixed position on the page 00:08:03.070 --> 00:08:07.530 using the idea if you want to. 00:08:09.490 --> 00:08:09.890 OK. 00:08:09.970 --> 00:08:14.570 And they said the physician to fix it. 00:08:16.630 --> 00:08:22.240 And finally mean he goes to the elements we are spying on. 00:08:22.240 --> 00:08:28.610 Let's go to the body and we're going to use also a data spy. 00:08:28.630 --> 00:08:32.110 But this time was to scroll. 00:08:32.190 --> 00:08:34.750 I will need another data attributes. 00:08:34.830 --> 00:08:39.350 Is the data targets which will set to the diff. 00:08:39.370 --> 00:08:43.260 That's Rupp's the list. 00:08:43.270 --> 00:08:44.650 OK. 00:08:44.890 --> 00:08:48.530 And you don't need to give it an ID. 00:08:48.660 --> 00:08:58.860 So it is give us an ID for example mice Karole Spidey. 00:08:59.870 --> 00:09:05.800 As we approach the page Okay now we can see that's our 00:09:09.720 --> 00:09:11.690 fix. 00:09:12.080 --> 00:09:13.340 Logging is working. 00:09:13.480 --> 00:09:14.040 OK. 00:09:14.170 --> 00:09:20.240 So you can see that's the the list gets automatically updated depending on a scroll position. 00:09:20.470 --> 00:09:20.980 OK. 00:09:20.980 --> 00:09:32.420 So we can choose to write some javascript rather than using the data spy. 00:09:33.670 --> 00:09:37.050 For the the list. 00:09:37.140 --> 00:09:45.550 And rather than having some serious positioning we can replace all this by using javascript so if we 00:09:45.550 --> 00:09:46.890 get rid of that for now 00:09:51.740 --> 00:10:02.960 OK we to replace this by a line of javascript's as well or use the fix method. 00:10:04.300 --> 00:10:09.760 OK so replace everything inside the document ready for function. 00:10:10.480 --> 00:10:15.160 Ok so are you going to access our lists. 00:10:15.900 --> 00:10:17.040 OK. 00:10:17.900 --> 00:10:26.110 And then we'll use the method the method effects without any problem which is what. 00:10:26.350 --> 00:10:32.150 So if you refresh the page we can see that it is working. 00:10:32.370 --> 00:10:37.450 OK we can add another option. 00:10:37.540 --> 00:10:51.910 So that's the the list or the the list is only binde when we scroll down out of pixels for example. 00:10:52.480 --> 00:10:54.540 OK. 00:10:54.550 --> 00:11:00.530 So the option is going to be offset. 00:11:01.750 --> 00:11:02.040 OK. 00:11:02.040 --> 00:11:14.200 And we'll say that's why using the top property we can set aside of pixels for example. 00:11:14.200 --> 00:11:24.780 So now if we're a page so we expect seeing the the list to gets binned only when you scroll down to 00:11:24.820 --> 00:11:28.000 pixels it is Troy. 00:11:28.000 --> 00:11:28.800 Here we go. 00:11:28.900 --> 00:11:30.810 We can change that to 300. 00:11:30.820 --> 00:11:35.850 Just see how it works. 00:11:38.540 --> 00:11:53.650 OK so if we scroll down from 300 pixels we can see how the the the the list gets pinned. 00:11:53.690 --> 00:11:54.190 All right 00:11:56.820 --> 00:11:59.580 . 00:12:00.830 --> 00:12:11.000 OK let's get some contents before our row so that we can see these effects in a better way. 00:12:11.000 --> 00:12:15.930 Let's add a few paragraphs. 00:12:18.970 --> 00:12:21.490 OK so now if we. 00:12:21.680 --> 00:12:24.840 And now if you scroll down. 00:12:25.800 --> 00:12:26.390 OK. 00:12:26.400 --> 00:12:31.150 So from 300 pixels you can see how our elements gets pinned. 00:12:31.200 --> 00:12:31.560 OK