Up next in 10
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:03
hide headers and show headers when you
0:06
scroll
0:08
so we have this example right here so we
0:11
are having this header if you see this
0:13
is this is a header I'm talking about
0:17
just see when I start to scroll this
0:19
website this header will vanish so this
0:22
header will not be seen which is normal
0:25
but what happens when I scroll up so
0:28
once I reach the bottom and again the if
0:30
the user tries to scroll up now you will
0:33
see this header will stick and it will
0:36
stick all the time the user will see
0:39
this header all the time as they scroll
0:41
up and they reach the top so this is a
0:44
cool little effect you have seen on
0:46
multiple blog websites once you reach
0:48
the bottom and try to scroll up then
0:51
obviously this header will show here you
0:54
can have your logo image or whatever is
0:56
your
0:57
website any tagline any
1:00
survey that you are running you can fix
1:04
it at the top any poll survey or any
1:09
offer that you are running you can as
1:12
the user is using your website they
1:14
can see it all the time so this is a
1:18
very good little package in react CH so
1:21
the name of the package is react
1:24
Headroom so if you go to npmjs.com just
1:28
search for this package react
1:30
head room so it's specifically designed
1:33
for this react CH and it solves a great
1:37
problem of sticking your headers so and
1:41
hiding it as well so this is a command
1:43
I've already installed it it's almost
1:46
having 15,000 weekly downloads so I will
1:49
just show you a very basic example so
1:52
just create a functional
1:54
component and then you need to require
1:56
this package so I will just create a
1:59
simple
2:00
functional
2:01
component and then I will simply write
2:04
import and then the component name head
2:07
room and we are importing it from this
2:10
package react Headroom and it's a 12
2:13
kilobyte
2:15
package so right here in the jsx
2:17
wherever you need to import
2:21
this we have this H1 heading simply say
2:25
Headroom component
2:28
example so so now whatever is your comp
2:32
uh header that you want to stick it you
2:35
will surround it with this component you
2:39
have this parent tag and inside this you
2:41
will Define your header it can contain
2:44
text it can contain images as well so
2:47
let me put my website name freem mediat
2:49
tools.com and then we also put a small
2:52
little image so this image will be
2:57
coming in my assets one . gpg so this is
3:01
my profile picture I will have this
3:03
image tag and
3:07
display I will change the display to
3:12
flex just give it a so
3:15
that it appears in the center so
3:20
justify content to be
3:23
Center text align Center so now this
3:26
image will appear in the center
3:34
and then you can have
3:36
your let me paste some static content
3:40
static HTML content so the website is
3:42
large you can scroll so you can have
3:45
your website appearing and now if I
3:49
refresh so if you see
3:53
uh you will have this
3:56
image
3:57
and as I scroll up now you will see the
4:00
image will be stuck let me just give it
4:04
a fixed width of this image
4:07
of width of
4:09
50 and height of also 50
4:16
so so as you scroll now you will see the
4:19
now the logo and the image is fixed at
4:23
that location so as the user will scroll
4:25
up they
4:27
will at all time they will see this logo
4:30
and also the website name so this is a
4:32
cool little effect when they scroll down
4:35
they not see the header is hidden but
4:38
when they scroll up then they see this
4:39
header all the time so in this way you
4:42
can stick your header at a particular
4:45
location and you can do this with any
4:47
element any it can have heading it can
4:51
have image as well so text and images
4:54
you can stick it at a particular
4:56
location so it's a very good package in
5:00
react CH you can use
5:03
it
5:05
so thank you very much for watching this
5:08
video and also check out my website as
5:11
well free mediat tools.com uh which
5:15
contains thousands of tools regarding
5:18
audio video and image and I will be
5:20
seeing you in the next video
#Programming
#Software
#Other