html - 相对 parent 的位置固定不在 firefox 中工作

Question

我有 2 列，左边是一个列表，右边显示来自列表中所选元素的信息。

由于列表很大，我让正确的那个在 div 到达窗口顶部时保持固定，模仿 bootstrap 词缀行为，但使用自定义指令来做到这一点。

我必须让父 div (module-description) relative 滚动到顶部，然后我将类 sticky 添加到子 div(使用指令)所以它保持固定并在向上滚动时删除它。

这是右栏中的 html:

<div class="animated delay fade-in-right module-description">
  <div id="module-panel" class="panel" affix affix-on-refresh="scrollTop" affix-offset-class="top"></div>
</div>

这是影响这 2 个 div 的 css:

.module-description {
  float: right;
  width:50%;
  margin:0 auto;
  max-height: 600px;
  padding: 0 15px;
  position: relative;

  .panel {
    height: 600px;
    max-width: 555px;
    overflow-y: scroll;
  }
}
.sticky {
  position: fixed;
}

话虽如此，所有这些在 Chrome 上运行得非常好，但在 Firefox 中，即使应用了 sticky 类，右栏也不会固定在顶部，只会一直向上滚动。

我假设这是一种兼容性，这就是为什么我懒得展示我的指令，但如果有必要，我会更新问题。

Answer 1

所以，我发现问题出在 css animated属性，更具体地说是 animation-fill-mode: both;固定位置使用。

我改成了animation-fill-mode: backwards; (关于 here 的更多信息)它成功了!