Question

我的网页模板基于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>

这是我的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;
}

有人可以帮助我吗？感谢

Answer 1

尝试使用position: fixed;属性。这是一个小例子： http://jsfiddle.net/austinbv/2KTFG/

Answer 2

你想要position: fixed。

Answer 3

一个漂亮的CSS属性：

#outer {
  position: fixed;
}

Answer 4

冻结标题顶部（具有正确的标题宽度和对齐方式）

position:fixed;使标头静止不动，但与我期望标头的所有行为相去甚远-当实际表格标头从屏幕上向上滚动时，请停留在屏幕顶部，并保持与实际表格同步的冻结标题的宽度和html。此解决方案...

声明一个function resizeHdr()，它将循环访问tblData第一行<th>，并获取现有的宽度和HTML
设置窗口和占位符的全局变量，以确定tblData顶部在屏幕下方的距离
在$ready上，在<body>顶部插入一个新的隐藏的shell表
设置占位符
抓取宽度，从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>

如何冻结页面的标题

4 个答案:

冻结标题顶部（具有正确的标题宽度和对齐方式）