How to freeze header of the page
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.
<!--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
#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
Try using the position: fixed; property. Here is an example fiddle:
http://jsfiddle.net/austinbv/2KTFG/
You want position: fixed.
A nifty CSS attribute:
#outer {
position: fixed;
}
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...
- 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: y-scrolling shows the cloned header when the top of
tblData(main table) passes the screen top and hides it again when the bottom of the table passes above the top of the screen; and x-axis scrolling moves the cloned header sideways 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
<html>
<script type="text/javascript" src="jquery.min.js"></script><!-- load before freeze header -->
<script type="text/javascript">
var distance = 0, $window = $(window);
function resizeHdr(){
$("#tblDataHdr").css("width", $("#tblData").css("width"));
var oTr=$("#tblDataHdrTr").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(){
$("body").prepend(// stuff frozen header table html into the page just inside/at top of <body>
'<table class="'+$("#tblData").attr("class")+
'" style="display:none;position:fixed;background-color:white;z-index:10;'+$("#tblData").attr("style")+
'" id="tblDataHdr">'+
'<tr id="tblDataHdrTr" class="" style=""></tr></table>'
)
distance=$('#tblData').offset().top;
var oTr=$("#trHoldHdr");//stuff the frozen header
$("#tblDataHdr").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(){
$("#tblDataHdr").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 &&
$window.scrollTop() <= distance + 1*$("#tblData").css("height").replace(/px/,"")){
$("#tblDataHdr").css("display","");// Hdr has reached the top
}else{
$("#tblDataHdr").css("display","none");// Hdr below top
}
});
$(window).resize(function(){
resizeHdr();
});
</script>
<body>
<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>
<div style="height:300px;">Below table</div>
</body>
</html>
加载中,请稍侯......
精彩评论