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

回答1:

Try using the position: fixed; property. Here is an example fiddle: http://jsfiddle.net/austinbv/2KTFG/

回答2:

You want position: fixed.

回答3:

A nifty CSS attribute:

#outer {
  position: fixed;
}

回答4:

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 the tblData first row <th>'s and grab existing width and HTML
sets global variables for the window and placeholder for how far down the screen the tblData top 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 tblData top passes the screen top (also has to move the cloned header sideways for x-axis scrolling because position:fixed is, well, fixed)
sets a watcher for when the the window is resized to keep the widths of the cloned table in sync with 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>

来源：https://stackoverflow.com/questions/6013686/how-to-freeze-header-of-the-page

标签

html

css

header

freeze