当顶行具有固定位置时可滚动表格内容
我的公司文档页面需要按照此图片中指定的布局：
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>
我没有与内表结婚。我欢迎不同的解决方案，只要：
- 面包屑/标题/徽标固定在顶部，以便它们始终可见。
- 主题内容不会隐藏在固定顶部元素下，例如当页面加载或单击锚点链接时。
- 用户可以使用浏览器滚动条滚动内容。
My company doc pages need to be laid out as specified in this image:
The iframes are handled by the doc team software, MadCap Flare. The problem we're having is that we'd like the breadcrumbs and topic heading/logo to be fixed elements at the top of the page and have the topic content be scrollable, without disappearing under the fixed elements at the top.
We'd also like for the topic content scrollbar to be the web browser scrollbar, and not an overflow scroller. Additionally, because we have fixed elements at the top, we need to avoid content disappearing under the fixed element such as when the page loads or a link is clicked to an anchor somewhere on the page (anchors load at the top of the page and not the top of the content table cell).
The built content looks like this:
<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>
I'm not married to the inner table. I'll welcome a different solution so long as:
- the breadcrumbs/heading/logo are fixed at the top so they're always visible.
- topic content does not get hidden under the fixed top element, such as when the page loads or when clicking a link to an anchor.
- the user can scroll the content using the browser scrollbar.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
完全按照你提到的那样做，滚动条是原生的，框架对我说，尽管现在我不得不为自己的建议而自责。早在 90 年代初，当我开始使用框架时，框架就很烦人......
类似 JQuery 布局 的东西可能最终会为您做更多的事情，并且可以增加用户自定义（在一定程度上）其工作空间的能力。
由于 iFrame 也不再流行，您可以通过 jQuery Ajax 等直接将该信息绘制到 dom 中。至少我认为我会这样做。
Doing it exactly as you mention with the scrollbars being native says Frames to me, though now I have to beat myself silly for suggesting it. Frames were annoying back in the early 90's when I got my start....
Something like JQuery layout would probably end up doing a lot more for you and could add the ability for the user to customize (to an extent) their workspace.
Since iFrames are also not exactly in vogue any more, you could draw that information directly in to the dom via jQuery Ajax or the like. At least that's how I think I would approach it.
也许是这样的。它缺乏等高的列，但这可以实现。
小提琴
尝试一下！ - 但没有解决滚动条问题。投反对票是理所应当的。
Maybe something like this. It lacks equal height columns, but that can be acheived though.
Fiddle
Just a try! - Does not solve the scroolbar problem though. Downvotes desereved.
试试这个：
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 中进行了测试。
针对您的特定情况的用法：
Try this out:
http://jsfiddle.net/k2R3G/
I have created this jquery plugin to solve a similar issue I was having where I had a centered container (tabular data) and I wanted the header to fix to the top of the page when the list was scrolled. One of the issues was, when the header became fixed, the content below it would jump up the page (not good). This plugin compensates for the "fixed" element and allows the content below it to position and scroll as it should, without having to set margin-top on my content, so the header can vary in height.
In the jsfiddle, I modified your layout a bit to use list items instead of tables.
Here is the link to this jquery plugin that may solve this problem:
https://github.com/bigspotteddog/ScrollToFixed
The description of this plugin is as follows:
This plugin is used to fix elements to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down passed the target position, the element will be restored to its original position on the page.
This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.
Usage for your particular case: