1 00:00:00,660 --> 00:00:04,770 Welcome to the park who are building navigations fiction in this Would you be earning some because some 2 00:00:04,770 --> 00:00:07,300 javascript to the navigation section. 3 00:00:07,410 --> 00:00:10,060 So let us start adding some custom javascript you know given 4 00:00:13,770 --> 00:00:16,350 to add a custom DOS. 5 00:00:16,440 --> 00:00:25,110 I need to add a custom dodgiest find inside just for the customer or just begin and end your custom 6 00:00:25,890 --> 00:00:29,500 DOS and G-code inside custom dodgiest you can name it any. 7 00:00:29,520 --> 00:00:37,670 It is not necessary to name it custom dodgiest Akim milling it inside Indic index start hemol like script 8 00:00:44,670 --> 00:00:47,160 and tell us script and custom dodgiest 9 00:00:59,910 --> 00:01:05,570 OK looks at some custom double scope in GQ inside custom dodgiest. 10 00:01:06,110 --> 00:01:09,110 This is the result of nav bar. 11 00:01:09,410 --> 00:01:15,230 I want to make it invisible at exit 80 when user scrolls 12 00:01:18,020 --> 00:01:23,360 so let us add some custom javascript to show and hide the manipulation bar 13 00:01:27,240 --> 00:01:34,620 show and hide menu and for that dead Jews document already function 14 00:01:37,200 --> 00:01:40,590 Hawkwoman God creating function. 15 00:01:40,620 --> 00:01:41,590 This is a function. 16 00:01:41,760 --> 00:01:44,520 I explained in GQ section 17 00:01:47,340 --> 00:01:47,880 function 18 00:01:50,940 --> 00:02:01,490 and inside that I use strict log of tell a script so it will follow the Oscar standards and I can say 19 00:02:01,490 --> 00:02:07,020 that I mean X-ists the window object and on scroll 20 00:02:14,550 --> 00:02:28,560 we need to access some point but before I do it also need to add more inside this. 21 00:02:28,610 --> 00:02:45,770 And if the window object on scroll top is less then it depicts the menubar should become invisible. 22 00:02:46,570 --> 00:02:59,560 And to make an invisible I need to add some custom DOS SPSS like you need to hide the nav bar so in 23 00:02:59,560 --> 00:03:16,360 header section you have a class with nav bar and I will access the neighbor like Doc bar and RC ss. 24 00:03:16,560 --> 00:03:23,460 I will add the margin talk of this element. 25 00:03:24,060 --> 00:03:26,650 Go minus 100 pixel. 26 00:03:26,860 --> 00:03:35,110 This is a negative margin which will make the menu bar invisible and with opacity 27 00:03:37,690 --> 00:03:41,360 or zero. 28 00:03:42,550 --> 00:03:52,700 And if this scroll of function will return vertical scroll bar position for the window and if it is 29 00:03:52,700 --> 00:03:54,410 less than 80 it should apply. 30 00:03:54,410 --> 00:03:55,880 This is truly an airport. 31 00:03:55,910 --> 00:04:03,230 If it is greater than 80 then else it should apply in this year. 32 00:04:03,240 --> 00:04:07,720 This should make it visible like margin calls should be zero. 33 00:04:10,290 --> 00:04:18,340 And the opacity should be one there to see that is in the goals of appreciate. 34 00:04:19,350 --> 00:04:27,890 And now you see when the user scrolls and add pixel. 35 00:04:28,070 --> 00:04:30,030 The become invisible. 36 00:04:30,080 --> 00:04:35,650 But if the vertical position is greater than 80 percent the menubar becomes visible. 37 00:04:39,660 --> 00:04:46,520 Let's add some more CSSA late you can see at this point we can not see properly the menubar and for 38 00:04:46,530 --> 00:04:50,050 dead we have a gloss ended with Nebo Duport hitting 39 00:04:55,940 --> 00:04:57,310 nav bar default. 40 00:04:57,370 --> 00:05:03,680 Let's add some she uses the word default had some scrolling point 41 00:05:07,880 --> 00:05:08,670 team. 42 00:05:08,840 --> 00:05:19,430 We have a class of netballer default to get to this specific loss of step and use excessive 43 00:05:25,090 --> 00:05:28,340 Gela script like this. 44 00:05:28,620 --> 00:05:30,190 I don't see this 45 00:05:35,320 --> 00:05:39,190 as background rate not transparent 46 00:05:44,790 --> 00:05:49,610 the network deportee beggar is transparent and some background 47 00:06:00,130 --> 00:06:16,210 to see the background should be an audience seeing the ear need fifty nine fifty nine fifty nine and 48 00:06:16,210 --> 00:06:27,160 get alpha value of transparent Seatle that is an ending that transparent to zero because then the scroll 49 00:06:27,160 --> 00:06:30,210 position is less than it should become invisible. 50 00:06:30,210 --> 00:06:39,190 Before I ended the transparency at zero Let's end this year since the section 51 00:06:44,370 --> 00:06:46,550 in the S L section. 52 00:06:46,600 --> 00:06:49,730 The transparency should become quite Salwen 53 00:06:54,960 --> 00:07:05,580 and learns at some border Goodere could never default. 54 00:07:05,820 --> 00:07:19,860 It should be this could that isn't in a browser refresh it Nosheen it just not getting it looks like 55 00:07:19,940 --> 00:07:20,850 is some problem 56 00:07:23,970 --> 00:07:24,590 now. 57 00:07:24,610 --> 00:07:25,670 Everything looks fine 58 00:07:30,070 --> 00:07:30,620 slug. 59 00:07:30,690 --> 00:07:42,670 Some call Blome the OK is back ground close Norbeck color is close enough to see the desert taking 60 00:07:45,530 --> 00:07:46,930 keynoter looks fine. 61 00:07:47,140 --> 00:07:49,160 This background color would border 62 00:07:51,860 --> 00:08:02,960 so the purpose of this group is to make the menubar visible and invisible at pixel it even uses scrolls. 63 00:08:02,960 --> 00:08:05,310 So now there is our transparent background. 64 00:08:06,590 --> 00:08:10,720 So you can easily see the big hole. 65 00:08:10,940 --> 00:08:19,540 Ok there is some most Jasus like for example we have never brand and say. 66 00:08:19,760 --> 00:08:20,840 We have an image 67 00:08:34,600 --> 00:08:38,670 with you have some painting on it. 68 00:08:42,960 --> 00:08:51,720 He lifts and senseor assist to the nabû grand element and for dead. 69 00:08:54,200 --> 00:08:57,270 I have to add some height 70 00:09:03,150 --> 00:09:07,760 height or turn to five kicks in 71 00:09:10,980 --> 00:09:15,100 and it is in to move the top bading getting called 72 00:09:20,970 --> 00:09:37,550 or 0 0 pixel on CIRCE's CIRCE's do these anchor elements. 73 00:09:37,720 --> 00:09:39,650 But I'm new to Access. 74 00:09:41,210 --> 00:09:42,420 Not all not 75 00:09:48,160 --> 00:09:54,320 it will go in the else statement when it is visible. 76 00:09:54,530 --> 00:10:03,070 Darden I would never say go get this list item and then say that it is an element of some see is so 77 00:10:03,070 --> 00:10:03,910 studious 78 00:10:07,920 --> 00:10:08,360 and 79 00:10:14,430 --> 00:10:16,360 unique or just the coding 80 00:10:35,100 --> 00:10:36,900 should be 15 Hixson 81 00:10:42,460 --> 00:10:43,880 see that is there was a 82 00:10:48,020 --> 00:10:50,250 team that is a painting or 15 picks. 83 00:10:50,270 --> 00:10:53,060 This is what I wanted and 84 00:10:58,700 --> 00:11:03,290 there is also a height of 35 pixel painting top zero. 85 00:11:03,350 --> 00:11:16,040 So now you can see that position in the menu more I mean your body becomes invisible and it becomes 86 00:11:16,040 --> 00:11:18,710 visible at greater position of it. 87 00:11:20,380 --> 00:11:20,930 Looks fine. 88 00:11:21,040 --> 00:11:29,280 What can we infer lets add some smooth scrolling to this menu bar and core that makes use of descript. 89 00:11:29,740 --> 00:11:32,480 You can access it using the scroll bar. 90 00:11:32,500 --> 00:11:41,390 This hotel and your hotel in them have resources fine so you can see this smooth scrolling they can 91 00:11:41,390 --> 00:11:43,000 shoy to you. 92 00:11:43,640 --> 00:11:45,550 Let's end this more scrolling. 93 00:11:45,700 --> 00:11:47,650 This menubar. 94 00:11:50,460 --> 00:11:56,260 Google back Copi inside this code. 95 00:11:57,150 --> 00:12:01,660 And I was created inside the document daughterly corruption. 96 00:12:01,870 --> 00:12:05,410 There is some new documents dog maybe function 97 00:12:10,120 --> 00:12:10,510 and 98 00:12:13,390 --> 00:12:16,070 Snoad schooling 99 00:12:31,290 --> 00:12:34,850 just took more 100 00:12:38,370 --> 00:12:39,450 than say. 101 00:12:39,610 --> 00:12:40,900 I replaced the school 102 00:12:43,050 --> 00:12:48,510 saw the Niku at the small school couldn't nap. 103 00:12:48,990 --> 00:12:49,540 I don't 104 00:12:53,480 --> 00:13:02,860 and when you access it like God item I will see it and live to see the result. 105 00:13:05,660 --> 00:13:07,730 Now let me show it to you. 106 00:13:07,730 --> 00:13:11,190 If I go to the feature section you see this more scrolling. 107 00:13:11,540 --> 00:13:18,050 If I go back to about section and contex there soon this is all because of this new Edric script. 108 00:13:18,740 --> 00:13:27,560 So it is good practice to make use of all of the available scripts and we also need to add more scrolling. 109 00:13:27,680 --> 00:13:30,810 Good this but don't let us do it for that. 110 00:13:30,810 --> 00:13:38,430 I need to add an ID to the element in the Hueter container here. 111 00:13:38,780 --> 00:13:43,780 Ed ID school group. 112 00:13:44,580 --> 00:13:52,030 Stop is also add this ID in the selector. 113 00:13:52,040 --> 00:14:00,210 This is the way to add an ID in the GQ selector refresh. 114 00:14:01,910 --> 00:14:04,010 You see the most coding. 115 00:14:05,180 --> 00:14:13,100 So in this video the editors who died off skipped the first one has to hide and should our menu bought 116 00:14:13,190 --> 00:14:20,060 at some certain point and the second script is to make the name and navigation to our small scrolling. 117 00:14:20,110 --> 00:14:23,120 So that's it for this to continue on to the next would you. 118 00:14:23,130 --> 00:14:23,490 Thanks.