1 00:00:00,800 --> 00:00:03,100 All right, so great work so far. 2 00:00:03,100 --> 00:00:06,800 All of the site's content and components are in place. 3 00:00:06,800 --> 00:00:10,620 Now our site is one long, scrollable page. 4 00:00:10,620 --> 00:00:14,910 Currently, the navigation doesn't let visitors know where they are on the page. 5 00:00:14,910 --> 00:00:19,020 Even when you click a link to navigate to a section like Speakers, 6 00:00:19,020 --> 00:00:22,640 the nav link remains dim, with no visual feedback. 7 00:00:22,640 --> 00:00:26,250 Well Bootstrap has a simple solution for this called Scrollspy. 8 00:00:27,260 --> 00:00:30,550 Scrollspy is an interactive JavaScript plugin 9 00:00:30,550 --> 00:00:33,730 that highlights the active navigation links. 10 00:00:33,730 --> 00:00:38,194 It automatically updates your nav links based on a user's scroll position. 11 00:00:38,194 --> 00:00:41,484 For example, in the provided Scrollspy demo, 12 00:00:41,484 --> 00:00:46,100 notice how the nav links and the nav change based on where I scroll. 13 00:00:47,180 --> 00:00:51,040 Adding Scrollspy to your site's navigation is simple. 14 00:00:51,040 --> 00:00:56,240 First, you add a data-spy attribute to the body of the page. 15 00:00:56,240 --> 00:01:00,210 Then add the data-target attribute with the id, or 16 00:01:00,210 --> 00:01:03,140 class name of your navigation component. 17 00:01:03,140 --> 00:01:08,050 To start, I'll copy the necessary attributes from the docs, 18 00:01:08,050 --> 00:01:10,700 and paste them inside my opening body tag. 19 00:01:12,720 --> 00:01:18,640 So the nav component wrapper has a class of navbar. 20 00:01:18,640 --> 00:01:24,480 So I'll write .navbar as the value for data-target. 21 00:01:24,480 --> 00:01:27,240 And notice how I included the period in the class. 22 00:01:27,240 --> 00:01:30,960 If you don't include the period, Scrollspy will not work in your page. 23 00:01:32,480 --> 00:01:36,660 So the first link in the navigation is Home, which links to or 24 00:01:36,660 --> 00:01:40,750 targets a section of the page with an id of home. 25 00:01:40,750 --> 00:01:46,033 So, let's give our top-most element, the body tag, the id home. 26 00:01:50,045 --> 00:01:51,720 Give this a Save. 27 00:01:51,720 --> 00:01:55,340 And since we're viewing the top section of the page, 28 00:01:55,340 --> 00:01:58,030 notice how the Home link turns active. 29 00:01:58,030 --> 00:02:03,260 Now let's the rest of the id targets for about speakers and schedule. 30 00:02:03,260 --> 00:02:04,768 And just like the Home id, 31 00:02:04,768 --> 00:02:08,410 the ids should match what's defined in the links href values. 32 00:02:10,010 --> 00:02:14,524 So I'll scroll down to the about section and 33 00:02:14,524 --> 00:02:18,803 give the about contents row the id about. 34 00:02:23,114 --> 00:02:27,051 We already assigned an id to the speaker setting earlier, so 35 00:02:27,051 --> 00:02:29,840 all that's left is the schedule section. 36 00:02:29,840 --> 00:02:34,840 So I'll scroll down to the schedule, h1, and 37 00:02:34,840 --> 00:02:37,596 give it an id of schedule. 38 00:02:43,725 --> 00:02:48,500 So now, scrolling the page automatically updates the active link based on 39 00:02:48,500 --> 00:02:50,730 where you are on the page. 40 00:02:50,730 --> 00:02:51,950 So when you scroll or 41 00:02:51,950 --> 00:02:56,820 click to navigate to the About content the About link turns active. 42 00:02:56,820 --> 00:03:04,550 Scrolling to Speakers makes the Speakers link active and so on, good. 43 00:03:04,550 --> 00:03:07,390 Now, to make Scrollspy even more precise, 44 00:03:07,390 --> 00:03:12,650 you can adjust the scroll offset using the data-offset attribute. 45 00:03:12,650 --> 00:03:17,215 For example, notice how the About link doesn't turn active 46 00:03:17,215 --> 00:03:20,719 immediately upon scrolling to the headings. 47 00:03:20,719 --> 00:03:24,380 The link turns active when you scroll past the headings. 48 00:03:24,380 --> 00:03:27,710 And the same happens in the Speakers and Schedule sections. 49 00:03:29,420 --> 00:03:35,380 So, the data-offset attribute, offsets the scroll target based on the value you set. 50 00:03:35,380 --> 00:03:40,810 In other words, the value you provide specifies the position 51 00:03:40,810 --> 00:03:43,000 above the target that the user must scroll to. 52 00:03:44,890 --> 00:03:49,912 So, for example, a data-offset value of 100 means that the nav 53 00:03:49,912 --> 00:03:55,917 link will activate when the user scrolls within 100 pixels above the target. 54 00:03:58,399 --> 00:04:02,822 So now, the nav links turn active when you scroll to each section's heading. 55 00:04:04,318 --> 00:04:04,818 Perfect. 56 00:04:06,570 --> 00:04:10,250 All right, so you finished one of the most important parts of this course, 57 00:04:10,250 --> 00:04:12,590 in learning about Bootstrap components. 58 00:04:12,590 --> 00:04:14,755 There's one more section to go, and it's a good one. 59 00:04:14,755 --> 00:04:19,583 So up next you'll learn how to style one of the most important features of any site 60 00:04:19,583 --> 00:04:21,360 or web application, forms.