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?

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

Answer 2

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

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.

Answer 4

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