OLD - fixed header with push-in revealable area

by moob

HTML

<div id="fixedHeader">
    <div id="reveavableWidget">
        <div id="revealableContent">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, dolore.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, dolore.</p>
        </div>
        <div id="revealableTrigger">click me!</div>
    </div>
     <h1>I'm a fixed header</h1>

</div>
<div style="padding:30px">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, dolore. Nihil veritatis consequuntur excepturi distinctio laborum aliquam illo expedita, sapiente.</p>
    <p>Illum repellat delectus nam, quos officia! Dolor fuga, temporibus consequuntur.</p>
    <p>Molestias iste odio dicta, a praesentium fugiat quidem suscipit. Tenetur. Animi labore, rem, numquam provident voluptatibus corrupti nostrum eos ab! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, eos!</p>
    <p>Aspernatur illo expedita tenetur beatae commodi, voluptates saepe itaque ea.</p>
    <p>Molestias voluptatum fugiat fugit, commodi, harum illo cum voluptates odio! Consequatur id, dolores maxime officia porro rerum iure error ea.</p>
    <p>Ipsam, qui explicabo inventore atque rem recusandae autem voluptatum soluta!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, numquam.</p>
    <p>Sint architecto tempora explicabo incidunt rerum harum modi ad, facilis.</p>
    <p>Laudantium vitae laboriosam distinctio aspernatur quia, culpa natus, magnam est.</p>
    <p>Velit veritatis autem voluptas quia, numquam dignissimos nihil quod fuga. Voluptas aliquam soluta non nemo quas ipsum quaerat, inventore consequuntur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, illo! Recusandae quasi, eveniet laboriosam ab nobis placeat laudantium...

CSS

html, body {
    margin:0;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* optionally fixed header */
 #fixedHeader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    background-color:blue;
    z-index:999999;
}
/* revealable widget */
 #reveavableWidget {
    display:block;
    position:relative;
}
#reveavableWidget > #revealableContent {
    position:relative;
    padding:60px;
    background-color:#ee66ee;
    
    max-height:200px;
    overflow:auto;
    overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
#reveavableWidget > #revealableTrigger {
    position:absolute;
    top:100%;
    margin:auto;
    left:0;
    right:0;
    background-color:green;
    width:30%;
    text-align:center;
}

JavaScript

function revealableHeader() {
    var vph=0;
    getViewportHeight();
    
    var $htmlbody = $("html,body"),
        $fixedHeader = $("#fixedHeader"),
        $reveavableWidget = $("#reveavableWidget"),
        $revealableContent = $("#revealableContent"),
        $foRevealableContent = $("<div id='foRevealableContent'> </div>"),
        $revealableTrigger = $("#revealableTrigger");
       
    var maxheight = vph-100;
    $revealableContent.css({"max-height": maxheight+"px"});    
    var h = $revealableContent.outerHeight();
    var hh = $fixedHeader.outerHeight();
    
    /* hh = (hh>h)?hh:(hh+h);
     console.log('vph='+vph+' hh='+hh);
    $revealableContent.css({"height": h,"margin-top": -h});
    $foRevealableContent.css({"height": hh,"margin-top": -h});*/
    
    $fixedHeader.before($foRevealableContent);
   
    $reveavableWidget.on("click", "#revealableTrigger", function () {
        console.log("click");
        if (!$revealableContent.open) {         
            open();
        } else {
            close();
        }       
    });
    
    var open = function(){
        $revealableContent.open = true;
        $htmlbody.css({"overflow":"hidden"});
        $revealableContent.animate({marginTop:0}, 400);
        $foRevealableContent.animate({marginTop:0}, 400);
    }
    
    var close = function(){
        $revealableContent.open = false;
        $htmlbody.css({"overflow":""});
        //$revealables.animate({marginTop:-h}, 400);
        $revealableContent.animate({marginTop:-h}, 400);
        $foRevealableContent.animate({marginTop:-h}, 400);
    }

    var onResize = function () {
        console.log('resize');
        getViewportHeight();
        
        maxheight = vph-$revealableTrigger.outerHeight();
        $revealableContent.css({"max-height": maxheight+"px"});
        
        $revealableContent.css({"height": "auto"});
        $foRevealableContent.css({"height":"auto"});
        h = $revealableContent.outerHeight();
        hh =...