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? I thought about utilizing frame-sets and iframes, jus
-
Use
position: fixedon thedivthat contains your header, with something like#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 twodivs overlap. Have a look at thepositionproperty here: http://reference.sitepoint.com/css/position讨论(0) -
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; }讨论(0) -
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 case60pxCSS:
#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>讨论(0) -
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: #ffffd; 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>讨论(0) -
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%withoverflow.See a specific question on removing the scroll from the header here and answer here.
讨论(0) -
In modern, supported browsers, you can simply do that in CSS with -
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.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>讨论(0)
加载中...
- 热议问题