Menu
I am trying to create a page where there are multiple sections and as you scroll the header that you are on is always shown at the top of the page (in a fixed element). I want to achieve the same effect as on the iPhone where as you scroll it "pushes" the old header out of the way and replaces it.
I have seen it done with lists, but I want to do it with multiple HTML5 sections.
For example:
<section>
<h1>Header 1</h1>
<p>Text for section</p>
</section>
<section>
<h1>Header 2</h1>
<p>Text for section</p>
</section>
Does anyone have any idea?
Thanks
437
I've wanted to do this for a long time and Seeing @AlienWebguy's work inspired me to finally take it on. His JSFiddle was impressive, but needed a lot of work. I think this solution is pretty much ready to use in my production app.
http://jsfiddle.net/RichardBronosky/VMnnr/
HTML:
<body>
<div class="tableview">
<div id="header1" class="header">
<h2>Header 1</h2>
</div>
<div id="header1_content">
<p>
header1_content1
</p>
<p>
header1_content2
</p>
<p>
header1_content3
</p>
</div>
<div id="header2" class="header">
<h2>Header 2</h2>
</div>
<div id="header2_content">
<p>
header2_content1
</p>
<p>
header2_content2
</p>
<p>
header2_content3
</p>
</div>
<div id="header3" class="header">
<h2>Header 3</h2>
</div>
<div id="header3_content">
<p>
header3_content1
</p>
<p>
header3_content2
</p>
<p>
header3_content3
</p>
</div>
</div>
</body>
CSS:
body {
font-family:Helvetica,Arial,san-serif;
}
div.tableview {
background-color:#CCC;
}
.tableview p:nth-child(odd) {
background-color:#FFF;
}
.tableview p:nth-child(even) {
background-color:#F0F0F0;
}
.tableview p {
padding:8px;
margin:1px 0px 1px 0px;
}
body, .tableview p:last-of-type, .tableview p:first-of-type, .tableview .header h2 {
margin:0px;
}
.tableview .header {
background-color:#333;
color:#FFF;
width:100%;
position:relative;
}
.tableview .header h2 {
padding:8px 4px 8px 4px;
}
.tableview .fixed {
position:fixed;
top:0;
left:0;
}
JAVASCRIPT: (relies on jQuery)
// From: http://jsfiddle.net/AlienWebguy/mvtP7/1/ via: http://stackoverflow.com/questions/6720847
$(function(){
var lastScrollTop = 0;
// When the first header is given a fixed position, the inline content that follows with shift up.
el = $('.header').first();
// To over come this: clone it, make it invisible, remove id tags from it and its children, attach it before the original
el.before(el.clone(false).css({'visibility':'hidden'}).removeAttr("id").find("*").removeAttr("id").end()).addClass('fixed');
$(window).scroll(function(event){
var currentScrollTop = $(this).scrollTop();
$('.header').each(function(){
if($(this).hasClass('fixed')){
if (currentScrollTop > lastScrollTop){
console.log('scrolling down');
var _next_header = $(this).nextUntil('.header').next('.header');
if($(_next_header).length > 0){
if($('body').scrollTop() > $(_next_header).offset().top){
console.log("Bottom of header hit top of next header")
$(this).removeClass('fixed');
$(_next_header).addClass('fixed');
}
}
} else {
console.log('scrolling up');
var _prev_header = $(this).prevUntil('.header').prev('.header');
if($(_prev_header ).length > 0){
if($('body').scrollTop() < $('.fixed').next().offset().top-$('.fixed').height()){
console.log("Top of header hit bottom of previous content box")
$(this).removeClass('fixed');
$(_prev_header).addClass('fixed');
}
}
}
}
});
lastScrollTop = currentScrollTop;
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
