I have the header of a table in the middle of a page, but since the page is huge, I want to fix the header to the top of browser while I scroll down for the page...
So my question is: How do I set header to be normal, until the user scrolls down and the top border of header touches the browser border, where it should stay fixed on that position, no matter how much further down the user scrolls?
I have the header of a table in the middle of a page, but since the page is huge, I want to fix the header to the top of browser while I scroll down for the page...
So my question is: How do I set header to be normal, until the user scrolls down and the top border of header touches the browser border, where it should stay fixed on that position, no matter how much further down the user scrolls?
Share Improve this question edited Dec 10, 2012 at 5:16 Chris Like 2801 silver badge8 bronze badges asked Dec 10, 2012 at 5:06 NuticNutic 1,4374 gold badges16 silver badges32 bronze badges 1- use .scroll() of jquery and set at specific scroll point of window and either add a fixed position class to the target or do .css() to the target elem – Jai Commented Dec 10, 2012 at 5:21
7 Answers
Reset to default 7Let me explain as to how this could be done.
Steps
- Find your table header, and save its
position - Add a listener to the window's
scrollevent. - Check the window scroll against your table header position
- If the position < window scroll - add a class to fix the table header
- Else, reset the css to behave like a normal header.
I've posted a fiddle that you can find here.
Code sample
HTML
<div class='lots_of_stuff_in_here'> ... </div>
<table>
<thead id='my_fixable_table_header'>
<tr>
<th>My awsesome header number 1</th>
<th>My awsesome header number 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
// much more content
</tbody>
</table>
Javascript
// Just so you get the idea behind the code
var myHeader = $('#my_fixable_table_header');
myHeader.data( 'position', myHeader.position() );
$(window).scroll(function(){
var hPos = myHeader.data('position'), scroll = getScroll();
if ( hPos.top < scroll.top ){
myHeader.addClass('fixed');
}
else {
myHeader.removeClass('fixed');
}
});
function getScroll () {
var b = document.body;
var e = document.documentElement;
return {
left: parseFloat( window.pageXOffset || b.scrollLeft || e.scrollLeft ),
top: parseFloat( window.pageYOffset || b.scrollTop || e.scrollTop )
};
}
You're looking for a horizontally oriented "sticky box" that follows you down the page as you scroll.
Here is a walkthrough that explains how to create this effect for a sidebar: http://css-tricks./scrollfollow-sidebar/
I modified the code to work with a generic example that spans the width of the page:
HTML:
<div class="wrapper">
<div class="head">HEAD</div>
<div class="header">Table Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
CSS:
.wrapper {
border:1px solid red;
}
.head{
height: 100px;
background: gray;
}
.header {
background:red;
height:100px;
left:0;
right:0;
top:0px;
margin-top:100px;
position:absolute;
}
.content {
background:green;
height:1000px;
}
.footer {
background:blue;
height:100px;
}
jQuery:
$(function() {
var $sidebar = $(".header"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
top: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
top: 0
});
}
});
});
This will animate the header block into view when you scroll beyond where it originally appears.
jsFiddle here
you may try to enclose the bottom elements under the header in one div then add class to that div set overflow to auto
I hope you are looking like this Header Fix Demo
HTML
<div class="wrapper">
<div class="header">Header Fix</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
CSS
.wrapper {
border:1px solid red;
}
.header {
background:red;
height:100px;
position:fixed;
left:0;
right:0;
top:0;
}
.content {
background:green;
height:1000px;
}
.footer {
background:blue;
height:100px;
}
for keeping the position fixed of any block element,you need to use the absolute or the fixed property in the display attribute of style,but dont forget to give enough space and break to the top elements otherwise it will go under the header section.
$(window).scroll(function() {
if ($(this).scrollTop() > 100){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
css:
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
}
Here is a full working version using fixed headers, footers and columns!
Apply the classes for position relative, very important, otherwise the fixed column will overlap the header and footer, then define the classes at the table level where needed: "sticky-table"(mandatory), "sticky-header", "sticky-column", "sticky-footer", than call function "applyStickyHeaders". That's all!
$(function(){
applyStickyHeaders();
});
Full example:
https://jsfiddle/pintilies/6zLyxewg/4/
Tested in IE, FireFox and Chrome.