Not only do we have our videos there, but we have part 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 dot com.

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 these 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 i o t platform.

Essentially decree 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're going to use the position setting that we've used in the past.

This time we're actually going to be setting it too 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 demo document.

There's not a lot to it.

So let's go over the computer and I'll show you how this works.

Here we are my demonstration machine again.

I'm using a Mac book pro, and I wrote thes two files using text at it.

All you need is a basic asking text editor in order to do these projects.

So if you're in the Windows world, you can use note pad.

If you're in the Mac world, obviously you can use text edit.

If you're in the Lennox world, you can use nano them.

McGee.

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 came out.

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 on.

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 I o t platform, maybe you can have some current readings from 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 for 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 of the sticky stuff.

This will remain here as I scroll through the rest of the documents 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.

I ot 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 as the type of stuff that you could 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, forgives the main one.

That's important is the sticky d'oh.

So just period sticky tive.

What I've done here is we We've used position in the past for position you can have sticky.

Even 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, too sticky.

So what sticky does is sticky just simply makes it be right there.

Past that.

I've been set the position for this particular div to the top at zero pixels, and then I've set the background color toe like gray.

And that is just so that you can actually see it originally said it toe white.

And what actually works fine.

But it's just a little difficult again.

If you just go here, you just white, you knew, file.

You say it 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.

It's a little difficult on the eyes to determine what's what.

So again, something like like Gray just an easy way just to be able to find what that particular div ISS s O that really all is all there is to it for a sticky def past that we go down to the main Dev simply.

What I did for the main Dave is I've set the position to relative with a position to relative Does is, it actually starts.

It starts the text underneath this initial death.

Why that's important is again when you're using position and position is important for different things.

If you're going to 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 things, though, is here.

If I d'oh absolute for the position on a new file and I do save what'll happen, is it actually moves everything up and it starts at the beginning at the zero picks a mark.

So by doing relative, basically what it does is it looks at the other dibs on the page.

Amenable star after those dibs.

So again, things, things to play around with.

This is this is the type of thing to play around with them.

See how it works for yourself beyond that.

Okay, so we did position relative.

We did top zero pixels.

So again, I basically just starts it right after that, Dave, 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 take a look at the HTML document just to see how this works on again.

There's really nothing to it.

Basically, we have to dibs on.

Then we're just going to use those classes that we create.

It s so we have here the head and opening up the HTML we're gonna have a style sheet.

We're going to point to the sticky style that CSS.

So again, if the file is in the same folder or directory as HTML document, you can simply put the name of it.

There 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're going to create is we're gonna create a dip for the sticky stuff.

So again, think about this.

This might be menu options is might be a header.

This might be sensor readouts, that type of thing.

You know, whatever you wanna put there.

The main thing is you simply say that this is a sticky death, so I'm creating a sticky dib.

So the class ticket tive Well, then go back and it will have the class of Sticky div, the main important thing here is that you will have a position of sticky past that you're going to then close out that day.

If you're going to go down, we're gonna create the main dibs on the main Div.

Just has all of this nonsense text in it.

So again, if you're Korean, some kind of I o t platform this maybe reports, is maybe charts.

Whatever else.

I just have this, um, basically go down and we closed the div er, the only imported thing here is again.

We're using that class of Maine Div.

So it's gonna be it's gonna have a margin 10% from the left margin, 10% from the right.

It's gonna be a position of relative has got to start at the top zero pixel mark on then.

From that, are you gonna do again?

You close the door if you close the body, close the HTML and with that, you get a little sticky thing again.

This is one of those things that we can be incredibly simple, absolutely utterly simple to implement, but could be very valuable for your particular project again to keep something at the top of the screen.

So people again.

Menu bars, sensor settings in 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 at tribute and giving it different values.

You can see what different things that you could do with the dudes 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 desert better user experience again when the important things that 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 that heading, I don't know again.

Maybe maybe for a logo, your logo or something like that, just for a branding usage actually being able to use that sticky position eyes, something that could be very valuable for you in your projects.

It just do position colon sticky.

Then you start playing around and go from there.

Um, as always, I enjoy doing this class and look forward to the next one.

If you like the content that I create, please think about going to align the computer guy dot com and becoming a member or donating.

Please understand that all the educational videos are in front of the pay wall 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 pay wall.

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 servers cost money, equipment costs, money, travel costs, 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.