please remember that the complete
information for the class that you are
about to view is at Eli the computer guy
comm not only do we have our videos
there but we have parts lists diagrams
pictures and even complete code examples
so if you are watching this video and
you want more information please go to
Eli the computer guy comm welcome back
as you know I am Eli the computer guy
and in today's class I'm going to show
you how to use the sticky position
within CSS to keep an element of your
HTML document on the screen while you
scroll through the rest of it so this
might be important if you're creating
some kind of IOT platform essentially to
create to allow some information to
remain on the screen while you're
scrolling through and you're looking at
different reports so basically all this
all this is is we were going to use the
position setting that we've used in the
past this time we're actually going to
be setting it to sticky instead of a
relative or absolute and in that way we
will let an element of the HTML document
remain on the screen while we scroll
through the rest of the HTML document
there's not a lot to it so let's go over
to the computer and I'll show you how
this works
here we are at my demonstration machine
again I'm using a MacBook Pro and I
wrote these two files using a TextEdit
all you need is a basic ASCII text
editor in order to do these projects so
if you're in the windows world you can
use notepad if you're in the Mac world
obviously you can use TextEdit if you're
in the Linux world you can use Nano of
Mg edit whatever you'd like so I have
two documents here basically I have a
sticky style dot CSS and I have a sticky
dot html' so the sticky dot html' this
is the file that will open in our web
browser and of course this is the style
sheet before I actually take a look at
what I coded here let's go over and take
a look at the demonstration and so this
is the demonstration that I created
basically this is just a sticky example
what I've done here is I have created a
div I have set the background color to
light gray guess so it's easy for you to
to see while I'm doing the demonstration
and then down here I created another div
and I dumped in a lot of nonsense
information so I have something to
scroll through so again think about this
where again if you're
doing some kind of IOT platform maybe
you can have some current readings some
of the readings from your sensors here
maybe you can have some specific
information or specific links here so
that when people are scrolling through
the rest of the information maybe they
can go up here just very easily click on
the links again this is the type of
thing you have to be thinking about
where there's a technical way to do
something and then how you're actually
going to use it in a in the user
perspective or user experience is
something that you'll have to figure out
but basically all we're talking about
here with the sticky position setting is
I have this the sticky stuff this will
remain here as I scroll through the rest
of the document so again I'm just simply
scrolling through the rest of this
document again these are just nonsense
words but this just goes to show you
that this stays at the top while you
scroll through so again you might use
this for like some kind of header so if
you had a header here and then you had
some kind of menu so again think about
that IOT platform I'm scrolling through
I'm looking at different reports and
then I could just easily go up here and
click on a menu option to go to a
different place within the platform
that's been created that's the type of
stuff that you can do with sticky so
beyond that let's just go and take a
look at the CSS first just to show you
how the CSS for this works basically
I've created two classes for divs the
main one that's important is the sticky
div so just period sticky div what I've
done here is we've used position in the
past so for position you can have sticky
you've gonna have you can have absolute
you can have relative there's a number
of different settings you can have for
position all I've done today is I've
simply set the sticky the position I'm
sorry to sticky so what sticky does is
sticky just simply makes it be right
there
past that I then set the position for
this particular div to the top at 0
pixels and then I've set the background
color to light gray and that is just so
that you can actually see it I
originally set it to white and what
actually works fine but it's just a
little difficult again if you just go
here you just white you new file you do
say if again things to be thinking about
from user experience standpoint when you
scroll through it and it's white I mean
it works it still works it's still
sticky but it's a little
little difficult on the eyes to
determine what's what so again something
like light gray is just an easy way just
to be able to define what that
particular div is so that really all is
all there is to it for a sticky diff
past that we go down to the main div
simply what I did for the main div is
I've set the position to relative but
the position to relative does is it
actually starts it starts the text
underneath this initial div why that's
important is again when you're using
position and position is important for
different things so if you're gonna be
overlay text over an image you're most
likely going to be doing absolute so it
actually puts it in a specific place
over an image one of the things though
is here if I do
absolute for the position and I do file
and I do save what will happen is it
actually moves everything up and it
starts at the beginning at the zero
pixel mark so by doing relative
basically what it does is it looks at
the other dibs on the page and then
it'll start after those divs so again
things the thing is to play around with
this is this is the type of thing to
play around with and see how it works
for yourself B's beyond that okay so we
did position:relative we did top zero
pixels so again I basically just it
starts it right after that div I put a
margin of left of 10% and a margin of
right of 10% that just gives me a little
bit there past that let's go and take a
look at the HTML document just to see
how this works
and again there's really nothing to it
basically we have two divs and then
we're just going to use those classes
that we created so we have here the head
and opening up the HTML we're gonna have
the stylesheet we're gonna point to the
sticky style.css so again if the file is
in the same folder or directory as the
HTML document you can simply put the
name of it there if it is in a different
folder or directory you put the full
file path we're gonna open up the body
then the first div that we are going to
create is we're gonna create a div
before the sticky stuff so again think
about this this might be menu options
this might be a header this might be
sensor readouts that type of thing you
know whatever you want to put there the
main thing is is you simply say that
this is a sticky div so I'm creating a
sticky Dib so the class sticky div will
then go back and it will have the class
of sticky div and
important thing here is that you will
have a position of sticky past that
you're going to enclose out that day if
you're going to go down we're gonna
create the main div so the main div just
has all of this nonsense text in it
so again if you're creating some kind of
IOT platform this may be reports this
may be charts whatever else I just have
this basically go down and we close the
div the only important thing here is
again we're using that class of main div
so it's gonna be it's gonna have a
margin for 10% from the left it's gonna
margin 10% from the right it's gonna be
a position of relative but it's got to
start at the top zero pixel mark and
then from that all you're gonna do again
you close the div you close the body you
close the HTML and with that you get a
little sticky thing again this is one of
those things that it can be incredibly
simple absolutely utterly simple to
implement but can be very a valuable for
your particular project again to keep
something at the top of the screen so
people again menu bars sensor settings
and that type of thing might be very
valuable for your particular project
that you're creating and so now you know
about the position of a sticky and why
and might be important for you again
playing around with that position
attribute and giving it different values
you can see what different things that
you can do with it the divs that you've
created again with relative with
absolute with sticky that type of thing
you can go in there you can play around
and again by playing with that you might
find something that's useful to give
your end users a better better user
experience again one of the important
things that will keep hammering into
your head is it's not simply about
printing information out onto an HTML
document it's also about putting it in a
fashion that is actually useful to the
end users so again having a menu bar at
the top having sensor readings at the
top having maybe just just a heading I
don't know again maybe maybe for a logo
your logo or something like that is for
a branding usage actually being able to
use that sticky position is something
that could be very valuable for you in
your projects they just do position :
sticky then you start playing around and
go from there as always I enjoy doing
this class and I look forward to see on
the next one if you like the content
that I create please think about going
to Eli the computer guy comm and
becoming a member
or donating please understand that all
the educational videos are in front of
the paywall that includes the videos
that includes the notes the diagrams and
the code example all of that is freely
available and in front of the paywall
but if you want to watch opinion videos
or if you want to be able to comment you
do need to become a member
membership is $5 a month or $60 a year
and gives you access to those opinion
videos and the ability to comment if you
don't want to become a member you just
want to give a one-time donation there
is also a donate button where you can do
that please understand in order to
provide the education that I am it does
cost money the servers cost money
equipment cost money travel cost money
all of these things cost a reasonable
amount of money and the fact of the
matter is is YouTube's advertising
program no longer supports creators the
way that it used to so if you want to
these classes to continue to stick
around and you find them to be valuable
please think about either becoming a
monthly member or donating a few dollars
for this project