位置:粘贴(firefox)元素

时间:2016-05-06 11:44:35

标签: css css3 position sticky

位置的新价值对我来说非常混乱..很多搜索结果都给出了javascript / jQuery(JavaScript框架)解决方案。

在底部的例子里我有一个{{1} } tablethead

无论我无法达到什么样的结果。 欲望的结果是对桌子的粘性。粘性意味着当不在视图中元素是某种tbody固定意味着它粘在你的屏幕上。 我做了什么尝试:

  • position:fixed
  • 元素display: inline/block/inline-block;(th元素是tr女巫内部的元素在thead元素内)
  • position:sticky等的混合; (财产显示价值)

我只是找不到如何在firefox中实现这个粘性(支持)

任何解决方案??

(因为display:inline/block仍然是一个实验性的API并且不应在生产站点中使用http://developer.mozilla.org/en/docs/Web/CSS/position

position:sticky
table {
  background-color: rgba(241, 31, 0, 0.3);
  width: 100%;
}
thead {
  background-color: rgba(241, 0, 241, 0.3);
  position: -webkit-sticky;
  position: sticky;
}
th {} tbody td:nth-child(2) {
  height: 200px;
}

3 个答案:

答案 0 :(得分:8)

Firefox 似乎不允许在表子元素上使用“粘性”。

解决方法是将table设置为block,然后theadtbodytfoot设置为display:table;,以便其中一个可以坚持下去。

不幸的是,这会将表格布局和拆分表分成几个表.. :(

你还需要设置粘性进入行动http://codepen.io/gc-nomade/pen/reoExq的coordonates。不是最好的:(

CSS基础就像:

table {
  display: block;
}

thead {
  position: sticky;
  top: 0px;  /* trigger sticky when reaches coordonates */
}

thead, tbody, tfoot {
  display: table;
  width: 100%;
}

table {
  background-color: rgba(241, 31, 0, 0.3);
  width: 100%;
  margin-top: 1em;
  position: static;
  display: block;
}
thead {
  display: table;
  width: 100%;
  background-color: rgba(241, 0, 241, 0.3);
  position: sticky;
  top: 0px;
  /* trigger sticky when reaches coordonates */
}
tbody {
  display: table;
  width: 100%;
}
th {} tbody td:nth-child(2) {
  height: 200px;
}
<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

答案 1 :(得分:5)

另一种方法是使用css3翻译标题单元格。此方法确实需要javascript并且可以在所有现代浏览器中使用,但由于它会翻译表格单元格,因此出于某种原因(demo

不会包含边框

此外,此css必须在翻译的单元格中包含背景颜色

thead th,
caption {
  background: #fff;
}

的jQuery

var $win = $(window),
  $table = $('table'),
  $thead = $table.children('thead'),
  $tfoot = $table.children('tfoot'),
  $caption = $table.children('caption'),
  $cells = $thead.children().children().add($caption);

$win.on('scroll', function() {
  var bottom = $table.position().top +
        $table.height() -
        $thead.height() -
        ($tfoot.height() || 0),
    delta = $win.scrollTop() -
        $thead.offset().top +
        $caption.outerHeight(),
    // include border thickness (minus 2)
    vertPos = (delta < 0 || delta > bottom ? 0 : delta - 2);
  $cells.css("transform", "translate(0px," + vertPos + "px)");
});

答案 2 :(得分:2)

更新2018年第一季度

position: sticky现已登陆稳定的Firefox 59. The fiddle linked below现在也在Firefox中保持不变。

我知道你明确要求position: sticky的Firefox兼容性,但不幸的是它在Firefox中的样式效果没有在内部表元素上定义:

  

引自https://developer.mozilla.org/en/docs/Web/CSS/position

     

position-relative on table - * - group,table-row,table-column,table-cell和table-caption元素的效果未定义。

     

'position:sticky'对表格元素的影响与'position:relative'相同。

话虽如此,position: sticky即将登陆Chrome稳定版频道(在撰写本文时它位于金丝雀,there's a developer.google.com blog post about it)。它们的实现在thead上运行良好,解决了我自己长期存在的粘性问题,因为当你需要调整表/单元格宽度时,所有其他解决方案都会失败。

I've created a fiddle测试粘性定位。在Firefox的所有频道上,这都没有效果。

我希望position: sticky现在由于Chrome中更完整的实施而获得了跟踪,它将再次激起对sticky缺乏内部表支持的讨论。

还有关于Firefox'Bugzilla的错误报告: https://bugzilla.mozilla.org/show_bug.cgi?id=975644