Question

我的公司文档页面需要按this image：

中的说明进行布局

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

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

构建的内容如下所示：

<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>

我没有和内桌结婚。我会欢迎一个不同的解决方案，只要：

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

Answer 1

正如你所提到的那样，滚动条是原生的，这对我来说是Frames，虽然现在我不得不愚蠢地建议它。 90年代早期，当我开始时，画面很烦人....

像JQuery layout这样的东西最终可能会为你做更多的事情，并且可以为用户添加自定义（在某种程度上）工作区的能力。

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

Answer 2

也许是这样的。它没有相同的高度列，但可以通过。

实现

Fiddle

试一试！ - 虽然没有解决滚动条问题。 Downvotes desereved。

Answer 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();
});

顶行具有固定位置时的可滚动表格内容

3 个答案: