位置：粘不工作在Firefox [英] position: sticky not working in firefox

问题描述

我的html看起来像这样：

 < div class =wrap> 
 
< div class =sticky>边< / div> 
< div class =content>内容< div> 
< div> 
  

我的css：

  .content {
 height：2000px; 
 overflow：hidden; 
} 
 
 .sticky {
 position：sticky; 
 width：200px; 
 float：left; 
} 
  

当我向下滚动侧边栏滚动内容。它不坚持。任何人都知道可能是什么问题？

解决方案

如果您指定顶部

  .sticky {
 position：-webkit-sticky; / *为safari * / 
位置：粘性; 
 width：200px; 
 float：left; 
 top：10px; 
} 
  

小提琴

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?

解决方案

It sticks if you specify a top value:

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

fiddle

这篇关于位置：粘不工作在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！