If you're in need of a sticky box that stays horizontally oriented and follows as you scroll down the page, you've come to the right place.
Check out this step-by-step guide on how to achieve this effect for a sidebar: http://css-tricks.com/scrollfollow-sidebar/
I've customized the code to fit a basic example that stretches across 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
});
}
});
});
When scrolling past the original appearance point, this will smoothly bring the header block into view.
Experience it on jsFiddle here