Folding Framework

by Ben Clayton

HTML

<div class="header"  style="background-color:#FFDDDD;"><div class='htitle'>Beaches</div></div>
<div class="headeralt" ></div>
<h2>Spec</h2>
<p>
    This could be applied to Headers in the PE,Could be named "Hold Headers", could just add a class. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p><p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p><p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    <div class="header"  id='heading2' data-num=1 style="background-color:#DDFFDD;"><div class='htitle'>Light houses</div></div>
<div class="headeralt" ></div>
<h2>Bishop rock</h2>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad...

CSS

.header {
    position:relative;
    display:block;
    height:100px;
    width:100%;
    opacity:0.8;
    text-align:center;
    padding:0;
    /*-webkit-transition: height 0.4s; /* Safari 3.1 to 6.0 */
    /*transition: height 0.4s;*/
}
.htitle { position:absolute; top:40px;left:40%;    font-size:28px;
    -webkit-transition: font-size 0.4s;
    transition: font-size 0.4s;
}

.small .htitle { font-size:14px;
    -webkit-transition: font-size 0.4s;
    transition: font-size 0.4s;
}

.headeralt {
    display:none;
   height:100px;
}

JavaScript

var heads=[]; 
var minheight=30;
var maxheight=100;
$(window).on('scroll',function(){
    var st=$(window).scrollTop();
    console.log('scrolltop:',st);

    var $prev=null;
    $('.header').each(function(idx){
        
        if($prev && ((st+minheight)>heads[idx])){
          $prev.css('top',-((st+minheight)-heads[idx]));
        }
        if(st>heads[idx]){
            var h=maxheight-(st-heads[idx]);
            if(h<minheight){h=minheight}        
            $(this).css({'position':'fixed','top':'2px','margin-left':'0px','margin-right':'8px'}).addClass('small');
            $(this).next().css('display','block');
            console.log('new h:',h);
            $(this).height(h);
            $(this).find('.htitle').css('top',(h/2-10)+'px');
     
        }else{
            $(this).next().css('display','none');
            $(this).height(maxheight);
            $(this).css({'position':'relative'}).removeClass('small');
            return false;// no need to go further down page
        }
        $prev=$(this);
    });

});
$(window).on('load resize',function(){
    $('.header').each(function(idx){
        heads[idx]=$(this).offset().top;
    });
});