Scrollable table content when top row has fixed position
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/lo开发者_开发问答go 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.
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.
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:
<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();
});
加载中,请稍侯......
精彩评论