Javascript 如何在滚动时保持标题静态，始终在顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3593594/
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
How to keep the header static, always on top while scrolling?
提问by David
How would I go about keeping my headerfrom scrolling with the rest of the page? I thought about utilizing frame-setsand iframes, just wondering if there is a easier and more user friendly way, what would be the best-practice for doing this?
我将如何防止我header滚动页面的其余部分？我考虑过使用frame-setsand iframes，只是想知道是否有更简单、更用户友好的方式，这样做的最佳实践是什么？
回答by Yi Jiang
Use position: fixedon the divthat contains your header, with something like
使用position: fixed的div包含您的头，喜欢的东西
#header {
position: fixed;
}
#content {
margin-top: 100px;
}
In this example, when #contentstarts off 100px below #header, but as the user scrolls, #headerstays in place. Of course it goes without saying that you'll want to make sure #headerhas a background so that its content will actually be visible when the two divs overlap. Have a look at the positionproperty here: http://reference.sitepoint.com/css/position
在这个例子中，当#content开始低于 100px 时#header，但随着用户滚动，#header停留在原地。当然，不用说，您需要确保#header有一个背景，以便在两者div重叠时它的内容实际上是可见的。看看position这里的财产：http: //reference.sitepoint.com/css/position
回答by Suresh Pattu
.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;
}<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>回答by Vandesh
In modern, supported browsers, you can simply do that in CSS with -
在现代支持的浏览器中，您可以简单地在 CSS 中使用 -
header{
position: sticky;
top: 0;
}
Note: The HTML structure is important while using position: sticky, since it's make the element sticky relative to the parent. And the sticky positioning might not work with a single element made sticky within a parent.
注意：HTML 结构在使用时很重要position: sticky，因为它使元素相对于父元素具有粘性。并且粘性定位可能不适用于在父级中粘性的单个元素。
Run the snippet below to check a sample implementation.
运行下面的代码片段以检查示例实现。
main{
padding: 0;
}
header{
position: sticky;
top:0;
padding:40px;
background: lightblue;
text-align: center;
}
content > div {
height: 50px;
}<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>回答by richpalsingh
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
如果您可以使用 bootstrap3，那么您可以使用 css“navbar-fixed-top”，您还需要在 css 下方添加以将页面内容向下推送
body{
margin-top:100px;
}
回答by Pramendra Gupta
here is one with css + jquery (javascript) solution.
这是一个带有 css + jquery (javascript) 的解决方案。
here is demo link Demo
这是演示链接 演示
//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;
}
});
})();
});
回答by ChrisAdmin
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 #content, in this case 60px
在查看了所有答案后，我发现了一种稍微不同的方式，使用最少的 CSS 和没有 JS，只需要在 中正确设置标题的高度#content，在这种情况下60px
CSS:
CSS：
#header {
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
#content {
margin-top: 60px;
z-index:1;
}
HTML:
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>
回答by AlikElzin-kilaka
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.
有一种方法可以通过滚动滚动来保持标题固定，而不是使用定位和填充/边距并且不知道标题的大小。
See the this plunkerwith a fixed header:
请参阅带有固定标题的this plunker：
<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...
The key here is a mix of height: 100%with overflow.
这里的关键是混合height: 100%使用overflow。
See a specific question on removing the scroll from the header hereand answer here.
回答by Niels Bos
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.
我个人需要一个始终可见的左侧和顶部标题的表格。受几篇文章的启发，我想我有一个很好的解决方案，您可能会觉得有帮助。此版本没有其他解决方案具有的浮动 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>
