顶行固定位置时可滚动的表格内容答案

【问题标题】：Scrollable table content when top row has fixed position顶行固定位置时可滚动的表格内容
【发布时间】：2017-11-05 19:08:00
【问题描述】：

我的公司文档页面需要按照this image中的规定进行布局：

iframe 由文档团队软件 MadCap Flare 处理。我们遇到的问题是，我们希望面包屑和主题标题/徽标成为页面顶部的固定元素，并使主题内容可滚动，而不会消失在顶部的固定元素下。

我们还希望主题内容滚动条成为网络浏览器滚动条，而不是溢出滚动条。此外，因为我们在顶部有固定元素，所以我们需要避免内容在固定元素下消失，例如当页面加载或点击链接到页面某处的锚点时（锚点加载在页面顶部而不是内容表格单元格的顶部）。

构建的内容如下所示：

<body>
  <table class="superheader">
    <tr class="topRow">
      <td class="headingBreadcrumbs">
        <div class="breadcrumbs">breadcrumb trail</div>
        <h1>topic heading</h1>
      </td>
      <td class="headingLogo">
        <img src="logo.png">
      </td>
    </tr>

    <tr class="contentRow">
      <td class="content" colspan="2">topic content - full of tables, divs,
      paragraphs, lists, etc...</td>
    </tr>
  </table>
</body>

我没有嫁给内桌。我会欢迎不同的解决方案，只要：

面包屑/标题/徽标固定在顶部，因此始终可见。
主题内容不会隐藏在固定顶部元素下，例如当页面加载或单击指向锚点的链接时。
用户可以使用浏览器滚动条滚动内容。

【问题讨论】：

你必须使用表格进行布局吗？ div应该用于布局。理想情况下，仅在处理表格数据时才使用表格
不，我不需要。但是我在使用 div 时遇到了与使用此表相同的问题： - 内容会在顶部固定 div 下消失，尤其是在单击链接时。 - 我能得到的唯一滚动条是内容 div 溢出滚动条。

标签： html css scroll html-table css-position

【解决方案1】：

完全按照您提到的滚动条是原生的那样做，这对我来说是 Frames，尽管现在我不得不因为建议它而愚蠢地打败自己。早在 90 年代初，当我刚开始工作时，框架就很烦人......

像JQuery layout 这样的东西可能最终会为您做更多的事情，并且可以增加用户自定义（在一定程度上）他们的工作空间的能力。

由于 iFrame 也不再流行，您可以通过 jQuery Ajax 等直接将这些信息绘制到 dom 中。至少我认为我会这样处理它。

【讨论】：

是的，'不消失在顶部固定位置元素'的事情是令人头疼的。如果您滚动内容并且顶部是固定的，那么如何避免不足/过度？
我们可能会使用这个解决方案。

【解决方案2】：

也许是这样的。它缺少等高的列，但这可以实现。

Fiddle

试一试！ - 虽然没有解决scrollbar问题。投反对票是理所当然的。

【讨论】：

【解决方案3】：

试试这个：

http://jsfiddle.net/k2R3G/

我创建了这个 jquery 插件来解决我在有一个居中容器（表格数据）时遇到的类似问题，并且我希望在滚动列表时将标题固定到页面顶部。问题之一是，当标题固定时，它下面的内容会跳到页面上（不好）。该插件补偿了“固定”元素，并允许其下方的内容按应有的位置和滚动，而无需在我的内容上设置 margin-top，因此标题的高度可以变化。

在 jsfiddle 中，我稍微修改了您的布局以使用列表项而不是表格。

这里是可以解决这个问题的 jquery 插件的链接：

https://github.com/bigspotteddog/ScrollToFixed

这个插件的描述如下：

此插件用于将元素固定到页面顶部，如果元素会垂直滚动到视图之外；但是，它确实允许元素随着水平滚动继续向左或向右移动。

给定一个选项marginTop，一旦垂直滚动到达目标位置，元素将停止垂直向上移动；但是，当页面向左或向右滚动时，元素仍会水平移动。一旦页面向下滚动超过目标位置，元素将恢复到页面上的原始位置。

此插件已在 Firefox 3/4、Google Chrome 10/11、Safari 5 和 Internet Explorer 8/9 中测试。

用于您的特定情况：

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('.topRow').scrollToFixed();
});

【讨论】：

哇，这是一个非常简单的解决方案。我们已经在我标记为答案的建议中部署了 JQuery 布局脚本，但它有点复杂，并且需要比您的解决方案更多的 JS（而且 Madcap Flare 迫使我们已经使用了大量的 JS，所以页面负载已经够糟糕了）。换句话说，我们可能会在下一个版本中考虑这个。谢谢！
酷。希望下次能帮到你。