1
00:00:01,210 --> 00:00:09,970
Hello, in this video, I am going to show you the position helper so that more information on the Bistrot

2
00:00:09,970 --> 00:00:16,270
website and I will provide a link to that in the description of opposition help essentially allow you

3
00:00:16,270 --> 00:00:19,170
to stick stuff to the top or bottom, like so.

4
00:00:19,320 --> 00:00:25,780
So I've got this head, I've got a bunch of videos embedded and you might have whatever scenario that

5
00:00:25,780 --> 00:00:26,280
you want.

6
00:00:26,290 --> 00:00:29,710
And as you can see, when I'm scrolling, everything is scrolling.

7
00:00:29,740 --> 00:00:35,560
But let's go to YouTube and I'll scroll everything but the top navigation by scrolling.

8
00:00:35,770 --> 00:00:37,870
We have to bootstrap everything.

9
00:00:37,900 --> 00:00:44,230
The first Boxgrove button, they can sort of navigation search bar that does not.

10
00:00:44,440 --> 00:00:46,270
So that's what we're going to be implementing.

11
00:00:46,480 --> 00:00:54,010
The themen you've got, whatever you all want to fix there or you got to do it for a class or fix that

12
00:00:54,010 --> 00:00:54,340
top.

13
00:00:54,340 --> 00:00:57,340
So we're fixing it to the top like so.

14
00:00:57,850 --> 00:01:02,500
And as you can see, when I screw this in that fixed for the fix dash bottom.

15
00:01:06,420 --> 00:01:07,710
That sticks to the bottom.

16
00:01:07,740 --> 00:01:08,860
That's great for a fighter.

17
00:01:09,270 --> 00:01:11,030
This one is great for a up.

18
00:01:11,550 --> 00:01:18,900
One thing I want to note is now that we put fix to the top, if it basically floating over it so all

19
00:01:18,900 --> 00:01:20,480
the content is moved up.

20
00:01:20,490 --> 00:01:27,210
So part of this video or whatever it is, whether it's text or whatever, is cut off basically that

21
00:01:27,210 --> 00:01:27,400
bit.

22
00:01:27,600 --> 00:01:30,040
So we need to move this down a bit.

23
00:01:30,060 --> 00:01:31,520
We need to move this down.

24
00:01:31,830 --> 00:01:40,710
You can, you know, provide some success via a separate style tag or if you want to keep simpleness

25
00:01:41,010 --> 00:01:48,330
here and just put more desktop and I'm going to put five pixels.

26
00:01:48,840 --> 00:01:55,890
This is just a value that I have experimented with and I find looks pretty good, but feel free to experiment

27
00:01:56,040 --> 00:02:01,740
as if they've got nice seventy five pixels down and that looks pretty nice.

28
00:02:02,490 --> 00:02:07,350
The last you know how per class I'm going to show you.

29
00:02:07,570 --> 00:02:08,910
Is that a fixed desktop.

30
00:02:09,120 --> 00:02:11,120
You can do Deqi laptop.

31
00:02:11,160 --> 00:02:11,940
That's my phone.

32
00:02:12,300 --> 00:02:13,680
Let me put it on silent.

33
00:02:13,690 --> 00:02:15,780
I thought I already did.

34
00:02:15,780 --> 00:02:17,080
It is on solamente.

35
00:02:17,430 --> 00:02:21,060
OK you can plastiki desktop if reload.

36
00:02:22,480 --> 00:02:29,730
One, it's you know, it's already got some margin, but that's irrelevant.

37
00:02:29,950 --> 00:02:31,780
Mirfin what's the difference.

38
00:02:32,170 --> 00:02:34,540
Let me show you why revert back.

39
00:02:34,900 --> 00:02:41,170
And before if I put something let's say like Hello World, it could be any content whatsoever and I

40
00:02:41,170 --> 00:02:44,100
reload that content you can't see.

41
00:02:44,710 --> 00:02:46,750
But if I go to inspect.

42
00:02:48,010 --> 00:02:50,710
And there it is, it is actually there.

43
00:02:50,740 --> 00:02:54,240
This is just covering it, and I'm trying to scroll up.

44
00:02:54,250 --> 00:02:58,360
I cannot if I was to change this to sticky desktop.

45
00:03:02,920 --> 00:03:11,440
So now for scroll down, this is only stuck to the top once any content before it has fully scrolled

46
00:03:11,440 --> 00:03:13,840
off essentially what they say.

47
00:03:13,880 --> 00:03:20,920
So this is a sticky, you know, navigation bar where this is just the regular wants us both scenarios

48
00:03:21,160 --> 00:03:26,080
covered so that if you have any questions, feel free to pop me a message.

49
00:03:26,260 --> 00:03:29,790
And as usual, I look forward to seeing you in the next video.