[英]How to keep the header static, always on top while scrolling?
How would I go about keeping my header
from scrolling with the rest of the page?我将如何防止我的header
随着页面的其余部分滚动? I thought about utilizing frame-sets
and iframes
, just wondering if there is a easier and more user friendly way, what would be the best-practice for doing this?我想过使用frame-sets
和iframes
,只是想知道是否有更简单、更用户友好的方式,这样做的最佳实践是什么?
Note: This answer dates from 2010. Consider position: sticky
in 2021, as mentioned in another answer .注意:此答案可追溯到 2010 年。请考虑position: sticky
2021 年的position: sticky
,如另一个答案中所述。
Use position: fixed
on the div
that contains your header, with something like使用position: fixed
在包含标题的div
,类似
#header {
position: fixed;
}
#content {
margin-top: 100px;
}
In this example, when #content
starts off 100px below #header
, but as the user scrolls, #header
stays in place.在这个例子中,当#content
从#header
下方 100px 开始时,但随着用户滚动,# #header
保持原位。 Of course it goes without saying that you'll want to make sure #header
has a background so that its content will actually be visible when the two div
s overlap.当然,不用说,您需要确保#header
具有背景,以便在两个div
重叠时它的内容实际上是可见的。 Have a look at the position
property here: http://reference.sitepoint.com/css/position看看这里的position
属性: http : //reference.sitepoint.com/css/position
position: sticky;
In modern, supported browsers , you can simply do that in CSS with -在现代支持的浏览器中,您可以简单地在 CSS 中使用 -
header {
position: sticky;
top: 0;
}
In most case, it is better than using position: fixed
, since position: fixed
takes the element out of the regular flow of elements.在大多数情况下,它比使用position: fixed
更好,因为position: fixed
将元素从常规元素流中取出。
Note :注意:
position: sticky
, since it makes the element sticky relative to the parent. HTML 结构在使用position: sticky
很重要,因为它使元素相对于父元素具有粘性。 And the sticky positioning might not work with a single element made sticky within a parent.并且粘性定位可能不适用于在父级中粘性的单个元素。overflow
property set Eg: if parent has overflow: auto
or overflow: hidden
, then sticky positioning might not work被粘住的元素的父级不应设置overflow
属性 例如:如果父级有overflow: auto
或overflow: hidden
,则粘性定位可能不起作用top
, bottom
, left
, right
is important because it makes the element sticky in relation to some position.至少给出top
, bottom
, left
, right
很重要,因为它使元素相对于某个位置具有粘性。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>
.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>
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;
}
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;
}
});
})();
});
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>
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 plunker with 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 here and answer here .参见从头部移除滚动一个具体的问题在这里和答案在这里。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.