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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:37:10  来源:igfitidea点击:

How to freeze header of the page

htmlcssheaderfreeze

提问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

回答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 the tblDatafirst 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 because position: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>