position: sticky not working in firefox

Question

position:sticky is said to be working in firefox but I'm not seeing my sidebar stick.

My html looks like this:

<div class="wrap">

    <div class="sticky">side </div>    
    <div class="content">content <div>
<div>

My css:

.content{
    height: 2000px;
    overflow: hidden;
}

.sticky{
    position: sticky;
    width: 200px;
    float: left;
}

As I scroll down the sidebar scrolls with the content. It doesn't stick. Anyone know what could be the issue?

Foskett

What FireFox version? – Fieldwork

I have the latest version – Foskett

As of Feb 2018 position: sticky for th still doesn't work in FF 58.0 (64-bit). Three years behind! – Sunlight

Yep it still doesn't work on thead and tr elements in ff chrome opera and maybe more browsers – Glengarry

Answer 1

It sticks if you specify a top value:

.sticky{
   position: -webkit-sticky; /* for safari */
   position: sticky;
   width: 200px;
   float: left;
   top: 10px;
}

fiddle

Impeccable

This doesn't work when you put the sticky thing below something else: jsfiddle.net/3qoe0wd0/44 I'm using Firefox 50.1.0 – Schoolgirl

@ChrisSmith The html markup is broken in your fiddle. That is likely an issue. The div tag isn't closed on the content class. – Beeson

Answer 2

I have the same issue in 2020 - this post pops up first in google but none of the answers helped me.

The actual problem was that sticky doesn't play well with the parent element being display: flex.

References:
- position: sticky, works in Chrome but not in Firefox
- https://bugzilla.mozilla.org/show_bug.cgi?id=1488080

Bedspring

I'm so bummed that this bug hasn't been fixed yet. I guess it's low priority but it breaks my app's layout in Firefox. – Jackstay

same issue in a display:grid element. Works like a dream on Chrome, scrolls right through my footer in firefox and then doesnt stick on the way up :( – Hutt

@Hutt Using display:block for sticky element helped me solve the same problem. – Hoopoe

It also doesn't work if the parent element has overflow hidden – Hawkweed

Answer 3

Position sticky also don't work if the parent element is set to overflow: hidden because it can't calculate the height correctly.

Lothaire

It will not work with overflow-x: hidden as well. So, any overflow (e.g. overflow, overflow-y, overflow-x) will bug out sticky. – Lsd

Answer 4

I was able to fix it by using 'display: table-cell'.

My problem concerned a thead that didn't want to stick anymore on Firefox as soon as I fixed the same problem in Chrome by using display: block or inline-block.

Leverhulme

setting display: table-cell and also float: unset (because I had another rule that tried to float the element) fixed it for me (inside a table inside a scroll-container inside a flexbox with overflow hidden) ...now I just need to go back to Chrome and make sure it still works there too :/ – Dasher

Answer 5

position: sticky does not work on table elements such as tr as well as some others.

A workaround is to wrap whatever you want sticky inside a span element.

    <style>.sticky span {position: -webkit-sticky; position: sticky; top: 0;}</style> 
    <td class='sticky' valign='top' width='200'>
    <span>
        (table contents)
    </span>
    </td>

Related answers and solutions

Kilogrammeter

Answer 6

I had same issue, even though I set a top value, the sticky element would not stick. The solution was to set a value also for height...

Laskowski

Not a solution in many scenarios – Rule

Answer 7

To anyone still having this trouble:

Firefox uses the parent display as a rendering condition

So try making the child display: inline and parent display: inline

Remember that you still need to check the parent position and size for all browsers. Sticky is great but it is very case-specific use.

Upheave

Not a solution if you need the parent to be flex – Rule

Answer 8

I found the alt way with very simple but works.

position:fixed;
width:100%;
top:0;
z-index:1; /*depends on your elements*/

Work on every browsers, no bulls. If your topnav has a lot of elements, the sticky wil not working, I beleive it's because of some overflow:hidden;

Spann

Answer 9

In my case, the sticky element was taking a display: table; property, which when I changed to display: block;, the sticky was fixed in Firefox. So, have a look at the display property before considering other fixes.

Arrogant

Answer 10

Just stumbled on this so it seems to still be an issue in 2022. I'll leave here what I had that allowed me to clearly replicate the OP and what I added to mitigate it.

div {
  position: sticky;
- display: inline;
+ display: block;
+ height: 100px;
  z-index: 2;
  top: 0;
}

Roybn

Setting a height is not an option in many scenarios – Rule

Answer 11

Hey this could be a shot in the dark, but i just fixed this bug on my code, turns out i was setting a height of 100vh to my body element, my body element in this case is a section with id=body.

in the css file i put a height of 100vh for #body element, but turns out the sticky position type did not like that and only worked once i removed it.

Boffin

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Monadism

Answer 12

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1020;
    top: 86px;
    height: min-content;
}

Adding height: min-content; fixed my issue on firefox

Blackheart

Answer 13

I had the same issue. Try the following on the parent component:

transform: translate3d(0, 0, 0); 
overflow: inherit;

Butta