Search code examples
cssfirefoxsticky

position: sticky not working in firefox

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?

Solution

  • It sticks if you specify a top value:

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

    fiddle