Html 如何冻结页面的标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6013686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to freeze header of the page
提问by vkrams
My web template is based on div tags. I want to freeze header part (Header, logo etc), I mean when you scroll the page the header should be in fixed position.
我的网页模板基于 div 标签。我想冻结页眉部分（页眉、徽标等），我的意思是当您滚动页面时，页眉应该处于固定位置。
<!--Header and Logo -->
<div id="outer">
<div id="header">
<h1><a href="#">Some Application</a></h1>
<img src="/media/images/logo.gif" height="95" width="190">
</div>
Here is my css
这是我的 css
#outer
{
}
/* Header */
#header
{
height: 95px;
background-image: url();
background-repeat:no-repeat;
background-position: bottom left;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 15px;
}
Can some one help me? Thanks
有人能帮我吗？谢谢
回答by austinbv
Try using the position: fixed;property. Here is an example fiddle:
http://jsfiddle.net/austinbv/2KTFG/
尝试使用该position: fixed;属性。这是一个示例小提琴：http:
//jsfiddle.net/austinbv/2KTFG/
回答by alex
You want position: fixed.
回答by Blender
A nifty CSS attribute:
一个漂亮的 CSS 属性：
#outer {
position: fixed;
}
回答by gordon
Freeze header at top (with correct header widths and alignment)
在顶部冻结标题（具有正确的标题宽度和对齐方式）
position:fixed;makes the header sit still but is far short of all the behavior I'd expect from a header - stick at the top of the screen when the actual table headers are scrolled up off the screen, and keep the widths and html of the frozen header synced with the actual table. This solution...
position:fixed;使标题保持静止，但远没有我期望的标题的所有行为 - 当实际表格标题从屏幕向上滚动时粘在屏幕顶部，并保持冻结标题的宽度和 html与实际表同步。这个解决方案...
- declares a
function resizeHdr()that will iterate through thetblDatafirst row<th>'s and grab existing width and HTML - sets global variables for the window and placeholder for how far down the screen the
tblDatatop is - on
$ready, inserts a new, hidden shell table that at the top of the<body> - sets the placeholder
- grabs width, margins from
tblData - calls
resizeHdr()to populate the hidden cloned table - sets a watcher for scrolling that will hide/show the cloned header when
tblDatatop passes the screen top (also has to move the cloned header sideways for x-axis scrolling becauseposition:fixedis, well, fixed) - sets a watcher for when the the window is resized to keep the widths of the cloned table in sync with
tblData
- 声明一个
function resizeHdr()将遍历tblData第一行<th>并获取现有宽度和 HTML - 设置窗口的全局变量和
tblData顶部距屏幕多远的占位符 - on
$ready，插入一个新的、隐藏的 shell 表，它位于<body> - 设置占位符
- 抓取宽度，边距
tblData - 调用
resizeHdr()以填充隐藏的克隆表 - 设置一个滚动观察器，当
tblData顶部经过屏幕顶部时将隐藏/显示克隆的标题（还必须将克隆的标题横向移动以进行 x 轴滚动，因为它position:fixed是固定的） - 设置一个观察者何时调整窗口大小以保持克隆表的宽度与
tblData
<script type="text/javascript">
var distance = 0, $window = $(window);
function resizeHdr(){
$("#tblHoldHdr").css("width", $("#tblData").css("width"));
var oTr=$("#trHoldHdr").html("");//short var for frozen header row
$("#tblData tr:first").find("th").each(function(i){//loop through
header to mimic
oTr.append('<th style="width:'+$(this).css("width")+' !important">'+$(this).html()+'</th>');//copy content with forced width
});
}
$(function(){
distance=$('#tblData').offset().top;
var oTr=$("#trHoldHdr");//stuff the frozen header
$("#tblHoldHdr").css({"margin-left":$("body").css("margin"),"margin-top":-parseInt($("body").css("margin"))+"px"});//position frozen hder
$("#tblData tr:first").find("th").each(function(i){//populate <th>
oTr.append("<th>"+$(this).html()+"</th>");
});
resizeHdr();
});
$(window).scroll(function(){
$("#tblHoldHdr").css("left", -$(this).scrollLeft());//frozen hdr pos fixed doesn't move w/ scrolling so this keeps it lined up (w/o "-" header slides twice as fast out to the right)
if($window.scrollTop() >= distance){
$("#tblHoldHdr").css("display","");// Hdr has reached the top
}else{
$("#tblHoldHdr").css("display","none");// Hdr below top
}
});
$(window).resize(function(){
resizeHdr();
});
</script>
<table id="tblData"><thead>
<tr><th><b style="color:red;">col 1</b></th><th><a href="#" title="hello world">Linked Wide Column Header</a></th><tr>
</thead><tbody>
<tr><td>1234567890 1234567890 1234567890</td><td>xyz</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
<tr><td>.</td><td>.</td></tr>
</tbody></table>
