54
我該如何去保持我的header不會滾動頁面的其餘部分？我想過利用frame-sets和iframes，只是想知道是否有一種更簡單和更友好的方式，這樣做的最佳做法是什麼？如何在頁面滾動時始終保持頁眉靜止？
A
回答
66
使用position: fixed包含您的頭，喜歡的東西
#header {
position: fixed;
}
#content {
margin-top: 100px;
}
在這個例子中div，當#content開始關閉100像素以下#header，但是當用戶滾動，#header停留在地方。當然，不言而喻，您需要確保#header具有背景，以便在兩個div重疊時其內容實際上可見。看一看在position物業位置：http://reference.sitepoint.com/css/position
+2
取決於你的'div's之間的關係，你可能需要在'＃header'中添加'margin-top：-100px;'來獲得它回到你想要的地方。 – rymo 2012-02-29 18:52:20
+0
你知道一種方式讓它滾動，直到它達到頂部，然後「位置：固定;」？如果你的頭部低於頂部？ – 2013-04-18 19:21:16
+0
它不包含在我的DIV寬度內。 – SearchForKnowledge 2015-03-25 15:20:17
4
這裏是一個用CSS + jQuery的（JavaScript）的解決方案。
這裏是演示鏈接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;
}
});
})();
});
3
這裏是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;
}
-6
我perso最後需要一張桌面，左邊和頂部的標題始終可見。受到幾篇文章的啓發，我認爲我有一個很好的解決方案，可能會對您有所幫助。 此版本沒有其他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>
4
如果你可以使用bootstrap3那麼你可以使用CSS「導航欄固定頂」 還需要添加下面的CSS把你的網頁內容下推
body{
margin-top:100px;
}
1
而是與定位工作和填充/邊距，而不知道標題的大小，有一種方法可以通過播放滾動來保持標題的固定。
見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...
這裏的關鍵是height: 100%與overflow組合。
+0
一個有問題的解決方案。看起來內容的底部被推到了窗口的下方。如果您將標題設置得更高，您可以更清楚地看到它。任何想法如何解決這個問題？ – 2015-10-12 13:49:43
+0
這似乎工作正常，但滾動在我的iPhone5上變得非常慢。 – 2017-08-09 14:11:21
+0
@AlainZelink - 你在iPhone5上使用什麼瀏覽器應用程序？ – 2017-08-13 08:17:05
1
通過所有的答案尋找後，我發現用最小的CSS，沒有JS的方式略有不同，需要在#content正確設置，在這種情況下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>
相關問題
- 1. 如何在頁面滾動時將頁眉保持在固定位置
- 2. 如何停止滾動頁眉的UITableView
- 3. jquery header在頁面向下滾動時保持靜態
- 4. 頁眉/頁腳滾動內容仍然靜止
- 5. SSRS滾動時，頁面頂部保持在頁面頂部
- 6. 如何在向下滾動頁面時保持浮動頂欄？
- 7. 點擊子頁面時，該頁面的URL如何始終保持不變？
- 8. 頁眉在始終頂頁腳底部
- 9. 如何保持物體上滾動頁面與頁面
- 10. 滾動時保持靜止的UITableViewCell
- 11. 如何在頁面加載時保持div的滾動位置
- 12. 可滾動div內的靜態頁眉
- 13. 頁面加載時顯示頁眉和頁腳的滾動條
- 14. 使頁眉和頁腳在黑莓中保持靜態
- 15. 始終打開頁眉和滑動格
- 16. jQuery-Mobile禁用頁面拖動和防止滾動頁眉/頁腳
- 17. 3使用flex CSS的窗格佈局，即使在頁面滾動時，頁眉始終位於頂部
- 18. 更新面板在主頁面時保持滾動位置
- 19. 如何抑制頁眉和頁面的頁面頁眉？
- 20. 當頁面變小而不滾動時，如何讓浮動頁眉不顯示？
- 21. 如何將頁腳始終保留在頁面底部？
- 22. 如何用wordpress頁眉和頁腳創建靜態頁面？
- 23. 如何在頁面之間導航時保持網格靜態？
- 24. 如何停止頁面滾動，同時......仍然允許滾動？
- 25. 紙滾動頁眉面板不工作
- 26. 如何確保頁眉浮動與水平頁面擴展？
- 27. 保持選項卡在新頁面加載時始終處於活動狀態
- 28. 如何始終顯示格當我滾動JSF頁面
- 29. 如何使頁眉和頁腳始終固定？
- 30. 如何防止頁面加載滾動
你說的'header'是什麼意思？一個頁面？桌子上？ – BrunoLM 2010-08-29 05:28:21
相關：http://stackoverflow.com/q/33075195/435605 – 2015-10-12 08:13:08