如何保持头静态，滚动时总是在顶部？
我将如何去保持我的header滚动页面的其余部分？ 我想过使用frame-sets和iframes frame-sets ，只是想知道是否有一个更容易和更友好的方式，这样做最好的做法是什么？
使用position: fixed在包含您的标题的div ，类似的东西
#header { position: fixed; } #content { margin-top: 100px; }
在这个例子中，当#content从#header下面100px开始，但是当用户滚动时，# #header停留在原地。 当然，不用说，你会想确保#header有一个背景，这样当两个div重叠时，它的内容实际上是可见的。 看看这里的position属性： http : //reference.sitepoint.com/css/position
这里是一个用CSS + jQuery（JavaScript）解决scheme。
这里是演示链接演示
//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%; } //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; } }); })(); });
如果你可以使用bootstrap3，那么你可以使用CSS“navbar-fixed-top”也需要添加下面的CSS来推动你的页面内容
body{ margin-top:100px; }
这是DEMO
HTML：
<div class="header"> <h1 class="header__content-text"> Header content will come here </h1> </div> <div class="page__content-container"> <div> <a href="http://imgur.com/k9hz3"> <img src="http://i.imgur.com/k9hz3.jpg" title="Hosted by imgur.com" alt="" /> </a> </div> <div> <a href="http://imgur.com/TXuFQ"> <img src="http://i.imgur.com/TXuFQ.jpg" title="Hosted by imgur.com" alt="" /> </a> </div> </div>
CSS：
.header { position: fixed; top: 0; left: 0; width: 100%; height: 48px; 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; }
不用处理定位和填充/边距而不知道标题的大小，有一种方法可以通过播放滚动来保持标题的固定。
用一个固定的标题看这个运动员 ：
<html lang="en" style="height: 100%"> <body style="height: 100%"> <div style="height: 100%; overflow: hidden"> <div>Header</div> <div style="height: 100%; overflow: scroll">Content - very long Content...
这里的关键是height: 100%的混合height: 100% overflow 。
在这里看到关于从标题中删除滚动的具体问题，并在 这里回答。
通过所有的答案，我发现了一个稍微不同的方式与最小的CSS和没有JS，只有头的高度需要在＃内容正确设置，在这种情况下， 60px
CSS：
#header { position: fixed; width: 100%; top: 0; z-index: 10; } #content { margin-top: 60px; z-index:1; }
HTML：
<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"> <!-- All page content here --> </div> </body>
我个人需要一张桌面，左边和顶部的标题始终可见。 受到几篇文章的启发，我觉得我有一个很好的解决scheme，你可能会觉得有帮助。 此版本没有其他soltion与浮动div或灵活/自动调整行和列的包装问题。
<!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%;"></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,' + 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(); }); </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"> </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>
