blocks|key|2878073|text|注:此答案可追溯至2010年。考虑一下another+answer中提到的2021年的position:+sticky。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2878074|2878075|在包含标头的div上使用position:+fixed，如下所示|2878076|#header+{
++position:+fixed;
}

#content+{
++margin-top:+100px;
}|code-block|syntax|javascript|2878077|在此示例中，当#content从低于#header的100px开始时，但当用户滚动时，#header保持不变。当然，不用说，您需要确保#header有一个背景，这样当两个div重叠时，它的内容实际上是可见的。在这里查看position属性：http://reference.sitepoint.com/css/position|2878078|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/58645785/1891625|1|http://reference.sitepoint.com/css/position^0|17|G|J|E|0|0|0|6|3|C|F|0|0|7|8|I|7|17|7|1V|7|2D|3|31|8|3C|17|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|F|3|-4|5|6|7|15|8|@]|D|@]|E|$]]|$1|G|3|H|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1B|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|P|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]|X|$5|S|T|U|E|$V|Y]]]]

<p>Note: This answer dates from 2010. Consider <code>position: sticky</code> in 2021, as mentioned in <a href="https://stackoverflow.com/a/58645785/1891625">another answer</a>.</p>
<hr />
<p>Use <code>position: fixed</code> on the <code>div</code> that contains your header, with something like</p>
<pre><code>#header {
  position: fixed;
}

#content {
  margin-top: 100px;
}
</code></pre>
<p>In this example, when <code>#content</code> starts off 100px below <code>#header</code>, but as the user scrolls, <code>#header</code> stays in place. Of course it goes without saying that you'll want to make sure <code>#header</code> has a background so that its content will actually be visible when the two <code>div</code>s overlap. Have a look at the <code>position</code> property here: <a href="http://reference.sitepoint.com/css/position" rel="nofollow noreferrer">http://reference.sitepoint.com/css/position</a></p>


blocks|key|1701313|text|这是一个css+%2B+jquery+(javascript)的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1701314|这是演示链接Demo|offset|length|1701315|//html

<div+id="uberbar">
++++<a+href="#top">Top+of+Page</a>
++++<a+href="#bottom">Bottom+of+Page</a>

</div>

//css+

#uberbar++++{+
++++border-bottom:1px+solid+#eb7429;+
++++background:#fc9453;+
++++padding:10px+20px;+
++++position:fixed;+
++++top:0;+
++++left:0;+
++++z-index:2000;+
++++width:100%25;
}

//jquery

$(document).ready(function()+{
++++(function()+{
++++++++//settings
++++++++var+fadeSpeed+=+200,+fadeTo+=+0.5,+topDistance+=+30;
++++++++var+topbarME+=+function()+{+$('#uberbar').fadeTo(fadeSpeed,1);+},+topbarML+=+function()+{+$('#uberbar').fadeTo(fadeSpeed,fadeTo);+};
++++++++var+inside+=+false;
++++++++//do
++++++++$(window).scroll(function()+{
++++++++++++position+=+$(window).scrollTop();
++++++++++++if(position+>+topDistance+&&+!inside)+{
++++++++++++++++//add+events
++++++++++++++++topbarML();
++++++++++++++++$('#uberbar').bind('mouseenter',topbarME);
++++++++++++++++$('#uberbar').bind('mouseleave',topbarML);
++++++++++++++++inside+=+true;
++++++++++++}
++++++++++++else+if+(position+<+topDistance){
++++++++++++++++topbarME();
++++++++++++++++$('#uberbar').unbind('mouseenter',topbarME);
++++++++++++++++$('#uberbar').unbind('mouseleave',topbarML);
++++++++++++++++inside+=+false;
++++++++++++}
++++++++});
++++})();
});|code-block|syntax|javascript|1701316|entityMap|0|LINK|mutability|MUTABLE|url|http://davidwalsh.name/dw-content/top-bar-opacity.php^0|0|6|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>here is one with css + jquery (javascript) solution.</p>

<p>here is demo link  <a href="http://davidwalsh.name/dw-content/top-bar-opacity.php" rel="nofollow noreferrer">Demo</a></p>

<pre><code>//html

&lt;div id="uberbar"&gt;
    &lt;a href="#top"&gt;Top of Page&lt;/a&gt;
    &lt;a href="#bottom"&gt;Bottom of Page&lt;/a&gt;

&lt;/div&gt;

//css 

#uberbar    { 
    border-bottom:1px solid #eb7429; 
    background:#fc9453; 
    padding:10px 20px; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:2000; 
    width:100%;
}

//jquery

$(document).ready(function() {
    (function() {
        //settings
        var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
        var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
        var inside = false;
        //do
        $(window).scroll(function() {
            position = $(window).scrollTop();
            if(position &gt; topDistance &amp;&amp; !inside) {
                //add events
                topbarML();
                $('#uberbar').bind('mouseenter',topbarME);
                $('#uberbar').bind('mouseleave',topbarML);
                inside = true;
            }
            else if (position &lt; topDistance){
                topbarME();
                $('#uberbar').unbind('mouseenter',topbarME);
                $('#uberbar').unbind('mouseleave',topbarML);
                inside = false;
            }
        });
    })();
});
</code></pre>


blocks|key|958837|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|958838|.header+{
++position:+fixed;
++top:+0;
++left:+0;
++width:+100%25;
++height:+88px;
++z-index:+10;
++background:+#eeeeee;
++-webkit-box-shadow:+0+7px+8px+rgba(0,+0,+0,+0.12);
++-moz-box-shadow:+0+7px+8px+rgba(0,+0,+0,+0.12);
++box-shadow:+0+7px+8px+rgba(0,+0,+0,+0.12);
}

.header__content-text+{
++text-align:+center;
++padding:+15px+20px;
}

.page__content-container+{
++margin:+100px+auto;
++width:+975px;
++padding:+30px;
}|code-block|syntax|javascript|958839|<div+class="header">
++<h1+class="header__content-text">
++++Header+content+will+come+here
++</h1>
</div>
<div+class="page__content-container">
++<div+style="height:600px;">
++++<a+href="http://imgur.com/k9hz3">
++++++<img+src="http://i.imgur.com/k9hz3.jpg"+title="Hosted+by+imgur.com"+alt=""+/>
++++</a>
++</div>
++<div+style="height:600px;">
++++<a+href="http://imgur.com/TXuFQ">
++++++<img+src="http://i.imgur.com/TXuFQ.jpg"+title="Hosted+by+imgur.com"+alt=""+/>
++++</a>
++</div>
</div>|958840|958841|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  z-index: 10;
  background: #eeeeee;
  -webkit-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
}

.header__content-text {
  text-align: center;
  padding: 15px 20px;
}

.page__content-container {
  margin: 100px auto;
  width: 975px;
  padding: 30px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
  &lt;h1 class="header__content-text"&gt;
    Header content will come here
  &lt;/h1&gt;
&lt;/div&gt;
&lt;div class="page__content-container"&gt;
  &lt;div style="height:600px;"&gt;
    &lt;a href="http://imgur.com/k9hz3"&gt;
      &lt;img src="http://i.imgur.com/k9hz3.jpg" title="Hosted by imgur.com" alt="" /&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;div style="height:600px;"&gt;
    &lt;a href="http://imgur.com/TXuFQ"&gt;
      &lt;img src="http://i.imgur.com/TXuFQ.jpg" title="Hosted by imgur.com" alt="" /&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4288074|text|我个人需要一个在任何时候都可以看到左侧和顶部标题的表格。受几篇文章的启发，我想我有一个很好的解决方案，你可能会发现它是有帮助的。此版本没有其他解决方案在浮动div或列和行的灵活/自动调整大小方面存在的包装问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4288075|<!DOCTYPE+html+PUBLIC+"-//W3C//DTD+XHTML+1.0+Transitional//EN"+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html+xmlns="http://www.w3.org/1999/xhtml">
<head>
++++<title></title>
++++<script+language="javascript"+type="text/javascript"+src="/Scripts/jquery-1.7.2.min.js"></script>
++++<script+language="javascript"+type="text/javascript">
++++++++//+Handler+for+scrolling+events
++++++++function+scrollFixedHeaderTable()+{
++++++++++++var+outerPanel+=+$("#_outerPanel");
++++++++++++var+cloneLeft+=+$("#_cloneLeft");
++++++++++++var+cloneTop+=+$("#_cloneTop");
++++++++++++cloneLeft.css({+'margin-top':+-outerPanel.scrollTop()+});
++++++++++++cloneTop.css({+'margin-left':+-outerPanel.scrollLeft()+});
++++++++}

++++++++function+initFixedHeaderTable()+{
++++++++++++var+outerPanel+=+$("#_outerPanel");
++++++++++++var+innerPanel+=+$("#_innerPanel");
++++++++++++var+clonePanel+=+$("#_clonePanel");
++++++++++++var+table+=+$("#_table");
++++++++++++//+We+will+clone+the+table+2+times:+For+the+top+rowq+and+the+left+column.+
++++++++++++var+cloneLeft+=+$("#_cloneLeft");
++++++++++++var+cloneTop+=+$("#_cloneTop");
++++++++++++var+cloneTop+=+$("#_cloneTopLeft");
++++++++++++//+Time+to+create+the+table+clones
++++++++++++cloneLeft+=+table.clone();
++++++++++++cloneTop+=+table.clone();
++++++++++++cloneTopLeft+=+table.clone();
++++++++++++cloneLeft.attr('id',+'_cloneLeft');
++++++++++++cloneTop.attr('id',+'_cloneTop');
++++++++++++cloneTopLeft.attr('id',+'_cloneTopLeft');
++++++++++++cloneLeft.css({
++++++++++++++++position:+'fixed',
++++++++++++++++'pointer-events':+'none',
++++++++++++++++top:+outerPanel.offset().top,
++++++++++++++++'z-index':+1+//+keep+lower+than+top-left+below
++++++++++++});
++++++++++++cloneTop.css({
++++++++++++++++position:+'fixed',
++++++++++++++++'pointer-events':+'none',
++++++++++++++++top:+outerPanel.offset().top,
++++++++++++++++'z-index':+1+//+keep+lower+than+top-left+below
++++++++++++});
++++++++++++cloneTopLeft.css({
++++++++++++++++position:+'fixed',
++++++++++++++++'pointer-events':+'none',
++++++++++++++++top:+outerPanel.offset().top,
++++++++++++++++'z-index':+2+//+higher+z-index+than+the+left+and+top+to+make+the+top-left+header+cell+logical
++++++++++++});
++++++++++++//+Add+the+controls+to+the+control-tree
++++++++++++clonePanel.append(cloneLeft);
++++++++++++clonePanel.append(cloneTop);
++++++++++++clonePanel.append(cloneTopLeft);
++++++++++++//+Keep+all+hidden:+We+will+make+the+individual+header+cells+visible+in+a+moment
++++++++++++cloneLeft.css({+visibility:+'hidden'+});
++++++++++++cloneTop.css({+visibility:+'hidden'+});
++++++++++++cloneTopLeft.css({+visibility:+'hidden'+});
++++++++++++//+Make+the+lef+column+header+cells+visible+in+the+left+clone
++++++++++++$("#_cloneLeft+td._hdr.__row").css({
++++++++++++++++visibility:+'visible',
++++++++++++});
++++++++++++//+Make+the+top+row+header+cells+visible+in+the+top+clone
++++++++++++$("#_cloneTop+td._hdr.__col").css({
++++++++++++++++visibility:+'visible',
++++++++++++});
++++++++++++//+Make+the+top-left+cell+visible+in+the+top-left+clone
++++++++++++$("#_cloneTopLeft+td._hdr.__col.__row").css({
++++++++++++++++visibility:+'visible',
++++++++++++});
++++++++++++//+Clipping.+First+get+the+inner+width/height+by+measuring+it+(normal+innerWidth+did+not+work+for+me)
++++++++++++var+helperDiv+=+$('<div+style="positions:+absolute;+top:+0;+right:+0;+bottom:+0;+left:+0;+height:+100%25;"></div>');
++++++++++++outerPanel.append(helperDiv);
++++++++++++var+innerWidth+=+helperDiv.width();
++++++++++++var+innerHeight+=+helperDiv.height();
++++++++++++helperDiv.remove();+//+because+we+dont+need+it+anymore,+do+we?
++++++++++++//+Make+sure+all+the+panels+are+clipped,+or+the+clones+will+extend+beyond+them
++++++++++++outerPanel.css({+clip:+'rect(0px,'+%2B+String(outerPanel.width())+%2B+'px,'+%2B+String(outerPanel.height())+%2B+'px,0px)'+});
++++++++++++//+Clone+panel+clipping+to+prevent+the+clones+from+covering+the+outerPanel's+scrollbars+(this+is+why+we+use+a+separate+div+for+this)
++++++++++++clonePanel.css({+clip:+'rect(0px,'+%2B+String(innerWidth)+%2B+'px,'+%2B+String(innerHeight)+%2B+'px,0px)'+++});
++++++++++++//+Subscribe+the+scrolling+of+the+outer+panel+to+our+own+handler+function+to+move+the+clones+as+needed.
++++++++++++$("#_outerPanel").scroll(scrollFixedHeaderTable);
++++++++}


++++++++$(document).ready(function+()+{
++++++++++++initFixedHeaderTable();
++++++++});

++++</script>
++++<style+type="text/css">
++++++++*+{
++++++++++++clip:+rect+font-family:+Arial;
++++++++++++font-size:+16px;
++++++++++++margin:+0;
++++++++++++padding:+0;
++++++++}

++++++++#_outerPanel+{
++++++++++++margin:+0px;
++++++++++++padding:+0px;
++++++++++++position:+absolute;
++++++++++++left:+50px;
++++++++++++top:+50px;
++++++++++++right:+50px;
++++++++++++bottom:+50px;
++++++++++++overflow:+auto;
++++++++++++z-index:+1000;
++++++++}

++++++++#_innerPanel+{
++++++++++++overflow:+visible;
++++++++++++position:+absolute;
++++++++}

++++++++#_clonePanel+{
++++++++++++overflow:+visible;
++++++++++++position:+fixed;
++++++++}

++++++++table+{
++++++++}

++++++++td+{
++++++++++++white-space:+nowrap;
++++++++++++border-right:+1px+solid+#000;
++++++++++++border-bottom:+1px+solid+#000;
++++++++++++padding:+2px+2px+2px+2px;
++++++++}

++++++++td._hdr+{
++++++++++++color:+Blue;
++++++++++++font-weight:+bold;
++++++++}
++++++++td._hdr.__row+{
++++++++++++background-color:+#eee;
++++++++++++border-left:+1px+solid+#000;
++++++++}
++++++++td._hdr.__col+{
++++++++++++background-color:+#ddd;
++++++++++++border-top:+1px+solid+#000;
++++++++}
++++</style>
</head>
<body>
++++<div+id="_outerPanel">
++++++++<div+id="_innerPanel">
++++++++++++<div+id="_clonePanel"></div>
++++++++++++<table+id="_table"+border="0"+cellpadding="0"+cellspacing="0">
++++++++++++++++<thead+id="_topHeader"+style="background-color:+White;">
++++++++++++++++++++<tr+class="row">
++++++++++++++++++++++++<td+class="_hdr+__col+__row">
++++++++++++++++++++++++++++&nbsp;
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="_hdr+__col">
++++++++++++++++++++++++++++TOP+HEADER
++++++++++++++++++++++++</td>
++++++++++++++++++++</tr>
++++++++++++++++</thead>
++++++++++++++++<tbody>
++++++++++++++++++++<tr+class="row">
++++++++++++++++++++++++<td+class="_hdr+__row">
++++++++++++++++++++++++++++MY+HEADER+COLUMN:
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++</tr>
++++++++++++++++++++<tr+class="row">
++++++++++++++++++++++++<td+class="_hdr+__row">
++++++++++++++++++++++++++++MY+HEADER+COLUMN:
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++++++<td+class="col">
++++++++++++++++++++++++++++The+quick+brown+fox+jumps+over+the+lazy+dog.
++++++++++++++++++++++++</td>
++++++++++++++++++++</tr>
++++++++++++++++</tbody>
++++++++++++</table>
++++++++</div>
++++++++<div+id="_bottomAnchor">
++++++++</div>
++++</div>
</body>
</html>|code-block|syntax|javascript|4288076|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I personally needed a table with both the left and top headers visible at all times. Inspired by several articles, I think I have a good solution that you may find helpful. 
This version does not have the wrapping problem that other soltions have with floating divs or flexible/auto sizing of columns and rows.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script language="javascript" type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
    &lt;script language="javascript" type="text/javascript"&gt;
        // Handler for scrolling events
        function scrollFixedHeaderTable() {
            var outerPanel = $("#_outerPanel");
            var cloneLeft = $("#_cloneLeft");
            var cloneTop = $("#_cloneTop");
            cloneLeft.css({ 'margin-top': -outerPanel.scrollTop() });
            cloneTop.css({ 'margin-left': -outerPanel.scrollLeft() });
        }

        function initFixedHeaderTable() {
            var outerPanel = $("#_outerPanel");
            var innerPanel = $("#_innerPanel");
            var clonePanel = $("#_clonePanel");
            var table = $("#_table");
            // We will clone the table 2 times: For the top rowq and the left column. 
            var cloneLeft = $("#_cloneLeft");
            var cloneTop = $("#_cloneTop");
            var cloneTop = $("#_cloneTopLeft");
            // Time to create the table clones
            cloneLeft = table.clone();
            cloneTop = table.clone();
            cloneTopLeft = table.clone();
            cloneLeft.attr('id', '_cloneLeft');
            cloneTop.attr('id', '_cloneTop');
            cloneTopLeft.attr('id', '_cloneTopLeft');
            cloneLeft.css({
                position: 'fixed',
                'pointer-events': 'none',
                top: outerPanel.offset().top,
                'z-index': 1 // keep lower than top-left below
            });
            cloneTop.css({
                position: 'fixed',
                'pointer-events': 'none',
                top: outerPanel.offset().top,
                'z-index': 1 // keep lower than top-left below
            });
            cloneTopLeft.css({
                position: 'fixed',
                'pointer-events': 'none',
                top: outerPanel.offset().top,
                'z-index': 2 // higher z-index than the left and top to make the top-left header cell logical
            });
            // Add the controls to the control-tree
            clonePanel.append(cloneLeft);
            clonePanel.append(cloneTop);
            clonePanel.append(cloneTopLeft);
            // Keep all hidden: We will make the individual header cells visible in a moment
            cloneLeft.css({ visibility: 'hidden' });
            cloneTop.css({ visibility: 'hidden' });
            cloneTopLeft.css({ visibility: 'hidden' });
            // Make the lef column header cells visible in the left clone
            $("#_cloneLeft td._hdr.__row").css({
                visibility: 'visible',
            });
            // Make the top row header cells visible in the top clone
            $("#_cloneTop td._hdr.__col").css({
                visibility: 'visible',
            });
            // Make the top-left cell visible in the top-left clone
            $("#_cloneTopLeft td._hdr.__col.__row").css({
                visibility: 'visible',
            });
            // Clipping. First get the inner width/height by measuring it (normal innerWidth did not work for me)
            var helperDiv = $('&lt;div style="positions: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%;"&gt;&lt;/div&gt;');
            outerPanel.append(helperDiv);
            var innerWidth = helperDiv.width();
            var innerHeight = helperDiv.height();
            helperDiv.remove(); // because we dont need it anymore, do we?
            // Make sure all the panels are clipped, or the clones will extend beyond them
            outerPanel.css({ clip: 'rect(0px,' + String(outerPanel.width()) + 'px,' + String(outerPanel.height()) + 'px,0px)' });
            // Clone panel clipping to prevent the clones from covering the outerPanel's scrollbars (this is why we use a separate div for this)
            clonePanel.css({ clip: 'rect(0px,' + String(innerWidth) + 'px,' + String(innerHeight) + 'px,0px)'   });
            // Subscribe the scrolling of the outer panel to our own handler function to move the clones as needed.
            $("#_outerPanel").scroll(scrollFixedHeaderTable);
        }


        $(document).ready(function () {
            initFixedHeaderTable();
        });

    &lt;/script&gt;
    &lt;style type="text/css"&gt;
        * {
            clip: rect font-family: Arial;
            font-size: 16px;
            margin: 0;
            padding: 0;
        }

        #_outerPanel {
            margin: 0px;
            padding: 0px;
            position: absolute;
            left: 50px;
            top: 50px;
            right: 50px;
            bottom: 50px;
            overflow: auto;
            z-index: 1000;
        }

        #_innerPanel {
            overflow: visible;
            position: absolute;
        }

        #_clonePanel {
            overflow: visible;
            position: fixed;
        }

        table {
        }

        td {
            white-space: nowrap;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            padding: 2px 2px 2px 2px;
        }

        td._hdr {
            color: Blue;
            font-weight: bold;
        }
        td._hdr.__row {
            background-color: #eee;
            border-left: 1px solid #000;
        }
        td._hdr.__col {
            background-color: #ddd;
            border-top: 1px solid #000;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="_outerPanel"&gt;
        &lt;div id="_innerPanel"&gt;
            &lt;div id="_clonePanel"&gt;&lt;/div&gt;
            &lt;table id="_table" border="0" cellpadding="0" cellspacing="0"&gt;
                &lt;thead id="_topHeader" style="background-color: White;"&gt;
                    &lt;tr class="row"&gt;
                        &lt;td class="_hdr __col __row"&gt;
                            &amp;nbsp;
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                        &lt;td class="_hdr __col"&gt;
                            TOP HEADER
                        &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                    &lt;tr class="row"&gt;
                        &lt;td class="_hdr __row"&gt;
                            MY HEADER COLUMN:
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr class="row"&gt;
                        &lt;td class="_hdr __row"&gt;
                            MY HEADER COLUMN:
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                        &lt;td class="col"&gt;
                            The quick brown fox jumps over the lazy dog.
                        &lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
        &lt;div id="_bottomAnchor"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1705227|text|如果你可以使用bootstrap3，那么你可以使用css+"navbar-fixed-top“，你还需要添加下面的css来向下推你的页面内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1705228|body{

+++margin-top:100px;
}|code-block|syntax|javascript|1705229|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you can use bootstrap3 then you can use css "navbar-fixed-top"
also you need to add below css to push your page content down</p>

<pre><code>body{

   margin-top:100px;
}
</code></pre>


blocks|key|1701377|text|在不知道标题大小的情况下，可以通过滚动来保持标题固定，而不是使用定位和填充/边距。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1701378|查看带有固定报头的this+plunker：|offset|length|1701379|<html+lang="en"+style="height:+100%25">
<body+style="height:+100%25">
<div+style="height:+100%25;+overflow:+hidden">
++<div>Header</div>
++<div+style="height:+100%25;+overflow:+scroll">Content+-+very+long+Content...|code-block|syntax|javascript|1701380|这里的关键是混合使用height:+100%25和overflow。|style|CODE|1701381|请参阅有关从标题here和answer+here中删除滚动的特定问题。|1701382|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/E93RVzoWMHkXB1jXhpMw?p=preview|1|https://stackoverflow.com/q/33075195/435605|2|https://stackoverflow.com/a/33075567/435605^0|0|9|C|0|0|0|A|C|N|8|0|8|4|1|K|4|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|18|8|@$D|19|E|1A|M|N]|$D|1B|E|1C|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@$D|1E|E|1F|1|1G]|$D|1H|E|1I|1|1J]]|A|$]]|$1|Q|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]|10|$5|T|U|V|A|$W|11]]]]

<p>Instead of working with positioning and padding/margin and without knowing the header's size, there's a way to keep the header fixed by playing with the scroll.</p>

<p>See the <a href="http://plnkr.co/edit/E93RVzoWMHkXB1jXhpMw?p=preview" rel="nofollow noreferrer">this plunker</a> with a fixed header:</p>

<pre><code>&lt;html lang="en" style="height: 100%"&gt;
&lt;body style="height: 100%"&gt;
&lt;div style="height: 100%; overflow: hidden"&gt;
  &lt;div&gt;Header&lt;/div&gt;
  &lt;div style="height: 100%; overflow: scroll"&gt;Content - very long Content...
</code></pre>

<p>The key here is a mix of <code>height: 100%</code> with <code>overflow</code>.</p>

<p>See a specific question on removing the scroll from the header <a href="https://stackoverflow.com/q/33075195/435605">here</a> and answer <a href="https://stackoverflow.com/a/33075567/435605">here</a>.</p>


blocks|key|2878256|text|看完所有的答案后，我发现了一种略微不同的方式，只需要在#content中正确设置头部的高度，在本例中是60px|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2878257|CSS：|2878258|#header+{
++position:+fixed;
++width:+100%25;
++top:+0;
++z-index:+10;
}
#content+{
++margin-top:+60px;
++z-index:1;
}|code-block|syntax|javascript|2878259|HTML：|2878260|<body>
++<div+id="header"+style="background-color:GRAY;+text-align:center;+border-bottom:1px+SOLID+BLACK;+color:WHITE;+line-height:50px;+font-size:40px">
+++++My+Large+Static+Header
++</div>
++<div+id="content">
+++++
++</div>
</body>|2878261|entityMap^0|R|8|1F|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p>After looking through all the answers, I found a slightly different way with minimum CSS and no JS, only the height of the header needs to be set correctly in <code>#content</code>, in this case <code>60px</code></p>

<p>CSS:</p>

<pre><code>#header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
}
#content {
  margin-top: 60px;
  z-index:1;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;body&gt;
  &lt;div id="header" style="background-color:GRAY; text-align:center; border-bottom:1px SOLID BLACK; color:WHITE; line-height:50px; font-size:40px"&gt;
     My Large Static Header
  &lt;/div&gt;
  &lt;div id="content"&gt;
     &lt;!-- All page content here --&gt;
  &lt;/div&gt;
&lt;/body&gt;
</code></pre>


blocks|key|4288231|text|position:+sticky;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4288232|在modern,+supported+browsers中，你可以简单地用CSS做这件事-|4288233|header+{
++position:+sticky;
++top:+0;
}|code-block|syntax|javascript|4288234|在大多数情况下，它比使用position:+fixed更好，因为position:+fixed将元素从常规的元素流中去掉。|4288235|便笺|BOLD|4288236|在使用position:+sticky时，|4288237|结构很重要，因为它会使元素相对于父元素变得粘性。粘性定位可能不适用于在父级中设置粘性的单个元素。|ordered-list-item|4288238|粘性元素的父级不应设置overflow属性，例如:如果父级具有overflow:+auto或overflow:+hidden，则粘性定位可能不起作用|4288239|至少提供top、bottom、D19、right中的一个很重要，因为它会使元素相对于某些位置粘滞。|4288240|4288241|运行下面的代码片段以检查示例实现。|4288242|​|4288243|main{
padding:+0;
}
header{
position:+sticky;
top:0;
padding:40px;
background:+lightblue;
text-align:+center;
}

content+>+div+{
height:+50px;
}|4288244|<main>
<header>
This+is+my+header
</header>
<content>
<div>Some+content+1</div>
<div>Some+content+2</div>
<div>Some+content+3</div>
<div>Some+content+4</div>
<div>Some+content+5</div>
<div>Some+content+6</div>
<div>Some+content+7</div>
<div>Some+content+8</div>
</content>
</main>|4288245|4288246|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/#feat=css-sticky^0|0|H|0|1|Q|0|0|0|C|F|W|F|0|0|2|0|3|G|0|0|B|8|V|E|1A|G|0|4|3|8|6|J|5|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|H|3|I|5|J|7|1P|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1V|8|@$9|1W|A|1X|B|Q]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1Y|8|@$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|T|3|U|5|V|7|21|8|@]|D|@]|E|$]]|$1|W|3|X|5|V|7|22|8|@$9|23|A|24|B|C]|$9|25|A|26|B|C]|$9|27|A|28|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|V|7|29|8|@$9|2A|A|2B|B|C]|$9|2C|A|2D|B|C]|$9|2E|A|2F|B|C]]|D|@]|E|$]]|$1|10|3|-4|5|6|7|2G|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|2H|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|2I|8|@]|D|@]|E|$]]|$1|15|3|16|5|J|7|2J|8|@]|D|@]|E|$K|L]]|$1|17|3|18|5|J|7|2K|8|@]|D|@]|E|$K|L]]|$1|19|3|14|5|6|7|2L|8|@]|D|@]|E|$]]|$1|1A|3|-4|5|6|7|2M|8|@]|D|@]|E|$]]]|1B|$1C|$5|1D|1E|1F|E|$1G|1H]]]]

<h2><code>position: sticky;</code></h2>
<p>In <a href="https://caniuse.com/#feat=css-sticky" rel="noreferrer">modern, supported browsers</a>, you can simply do that in CSS with -</p>
<pre><code>header {
  position: sticky;
  top: 0;
}
</code></pre>
<p>In most case, it is better than using <code>position: fixed</code>, since <code>position: fixed</code> takes the element out of the regular flow of elements.</p>
<p><strong>Note</strong>:</p>
<ol>
<li>The HTML structure is important while using <code>position: sticky</code>, since it makes the element sticky relative to the parent. And the sticky positioning might not work with a single element made sticky within a parent.</li>
<li>The parent of the element made sticky should not have the <code>overflow</code> property set Eg: if parent has <code>overflow: auto</code> or <code>overflow: hidden</code>, then sticky positioning might not work</li>
<li>Giving at least one of the <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code> is important because it makes the element sticky in relation to some position.</li>
</ol>
<p>Run the snippet below to check a sample implementation.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>main{
padding: 0;
}
header{
position: sticky;
top:0;
padding:40px;
background: lightblue;
text-align: center;
}

content &gt; div {
height: 50px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
&lt;header&gt;
This is my header
&lt;/header&gt;
&lt;content&gt;
&lt;div&gt;Some content 1&lt;/div&gt;
&lt;div&gt;Some content 2&lt;/div&gt;
&lt;div&gt;Some content 3&lt;/div&gt;
&lt;div&gt;Some content 4&lt;/div&gt;
&lt;div&gt;Some content 5&lt;/div&gt;
&lt;div&gt;Some content 6&lt;/div&gt;
&lt;div&gt;Some content 7&lt;/div&gt;
&lt;div&gt;Some content 8&lt;/div&gt;
&lt;/content&gt;
&lt;/main&gt;</code></pre>
</div>
</div>
</p>


<p>How would I go about keeping my <code>header</code> from scrolling with the rest of the page? I thought about utilizing <code>frame-sets</code> and <code>iframes</code>, just wondering if there is a easier and more user friendly way, what would be the best-practice for doing this?</p>


How to keep the header static, always on top while scrolling?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我该如何防止我的header与页面的其余部分一起滚动？我想过使用frame-sets和iframes，只是想知道是否有一种更简单、更用户友好的方式，做这件事的最佳实践是什么？

问如何保持标题不动，滚动时始终在顶部？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何保持标题不动，滚动时始终在顶部？EN