Skip to content
Sign upLog in
← Back to Community

Can I use the “sticky” position in CSS?

Profile icon
Hyydram

I’m creating an experimental webpage and wanted to apply the sticky position to a navigation bar. I tried to use a position: sticky; and position: -webkit-sticky; (to make sure that it wasn’t safari). I’m stuck at where I’m at right now and don't know what else to try, it would be great if someone could help me resolve this issue. Thanks!

Voters
Profile icon
CssCoder0
Profile icon
Baconman321
Profile icon
Hyydram
Comments
hotnewtop
Profile icon
Baconman321

It depends on your browser. Most browsers should support it (IDK why you would be using Chrome 30 or smthing, even then it's probably still supported).

Here: https://www.w3schools.com/howto/howto_css_sticky_element.asp

Profile icon
Hyydram

@Baconman321
I’m currently using safari, and I tried the position: -webkit-sticky; and made sure that I specified the top: 0; but I still couldn’t get it to work

Profile icon
AloeBest

Hello. I'm afraid that repl doesn't support that. (From my knowledge). Sticky (using body { position: sticky } ) didn't work for me either.

Profile icon
Hyydram

@AloegelhiPlaysR
Oh ok, I wonder if there could there be a work around of some sort?

Profile icon
AloeBest

I'm sure theres a workaround. I suggest doing some research trying to figure out possible work [email protected]

Profile icon
Hyydram

@AloegelhiPlaysR
For sure, I’ll see what I can find

Profile icon
Baconman321

@AloegelhiPlaysR
XD!!!

Repl doesn't control CSS, the client does.

Profile icon
Hyydram

@AloegelhiPlaysR
I went to OpenProcessing and found that it doesn’t work over there, so it must have something to do with browser IDEs

Profile icon
Hyydram

@Baconman321
So are you saying that it is my web browser? Sorry I’m kinda new to using this IDE

Profile icon
Baconman321

@IsaacMoisao
The IDE has nothing to do with it.

CSS is parsed on the user's computer, not handled on a server.

I think the problem here is that you are using it wrong (you are using it on the ul element. Use it on a div or container instead.

Profile icon
AloeBest

Depends. IF repl doesn't support a css element, it might not be able to get handled by the [email protected]

Profile icon
Baconman321

@IsaacMoisao
Also note that sticky will show its true magic when you scroll down so that the very top of the webpage is not visible (that's when it "sticks").

Make your web page longer so you can scroll down and it should show the sticky effect.

Btw nice website ;)

Profile icon
Hyydram

@Baconman321
True, whenever I set the position to sticky, it says that it wasn’t expected

Profile icon
Hyydram

@Baconman321
Thanks, I added some Loren Ipsum text to fill the space so I can scroll, but it still doesn’t work

Profile icon
Baconman321

@IsaacMoisao
You only did -webkit-sticky. IDK why but it isn't a valid value for me.

Also add another position property with position: sticky; as a fallback.

IDK why, but the float: left and float: right mess up the sticky function.

If you take out the float: left and float: right
(make sure to still add the position: sticky; as a fallback) then sticky works.

Profile icon
Hyydram

@Baconman321
I GOT IT!!! I honestly just messed around with the content and added the sticky tag and then set the z-index for the nav bar to 1, so it stays above the other content when I scroll but makes no changes when nothing happens. Thank you for the help, and i’ll probably be back soon!

Profile icon
xxpertHacker

@AloegelhiPlaysR
Repl doesn't support CSS, period.

All Repl does is allow you to edit the text file, and send it to the client, once there, the client's browser parses and handles it.