Ask coding questions

← Back to all posts
Can I use the “sticky” position in CSS?
IsaacMoisao (1)

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!

Comments
hotnewtop
Baconman321 (1050)

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

IsaacMoisao (1)

@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

AloegelhiPlaysR (104)

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

IsaacMoisao (1)

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

AloegelhiPlaysR (104)

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

IsaacMoisao (1)

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

Baconman321 (1050)

@AloegelhiPlaysR XD!!!

Repl doesn't control CSS, the client does.

IsaacMoisao (1)

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

IsaacMoisao (1)

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

Baconman321 (1050)

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

AloegelhiPlaysR (104)

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

Baconman321 (1050)

@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 ;)

IsaacMoisao (1)

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

IsaacMoisao (1)

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

Baconman321 (1050)

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

IsaacMoisao (1)

@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!

xxpertHacker (864)

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