How to keep the header static, always on top while scrolling?
JavascriptHtmlCssJavascript Problem Overview
How would I go about keeping my header from scrolling with the rest of the page? 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?
Javascript Solutions
Solution 1 - Javascript
Note: This answer dates from 2010. Consider position: sticky in 2021, as mentioned in another answer.
Use position: fixed on the div that contains your header, with something like
#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. 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 divs overlap. Have a look at the position property here: http://reference.sitepoint.com/css/position
Solution 2 - Javascript
position: sticky;
In modern, supported browsers, you can simply do that in CSS with -
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.
Note:
- The HTML structure is important while using
position: sticky, 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. - The parent of the element made sticky should not have the
overflowproperty set Eg: if parent hasoverflow: autooroverflow: hidden, then sticky positioning might not work - Giving at least one of the
top,bottom,left,rightis important because it makes the element sticky in relation to some position.
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>
Solution 3 - Javascript
.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>
Solution 4 - Javascript
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
body{
margin-top:100px;
}
Solution 5 - Javascript
here is one with css + jquery (javascript) solution.
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;
}
});
})();
});
Solution 6 - Javascript
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:
#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>
Solution 7 - Javascript
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:
<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.
See a specific question on removing the scroll from the header here and answer here.
Solution 8 - Javascript
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.
<!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>