Fixed Header with autohide and off-canvas push-in content. V2

by moob

HTML

<div id="fixedHeaderExample" class="fixedHeader no-js" >
    <div class="fixedHeader-revealableWrapper">
        <div class="fixedHeader-revealableContent">
            <p>For the benefit of users with JS disabled, #fixedHeader-revealableContent should *not* have any padding.</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 class="fixedHeader-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,...

CSS

.fixedHeader, .fixedHeader *, .fixedHeader:before, .fixedHeader:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* no js > */
.fixedHeader.no-js {
    position:relative;
}
.fixedHeader.no-js > .fixedHeader-revealableWrapper > .fixedHeader-revealableContent{
    max-height:0;
    padding:0;
    overflow:hidden;
}
.fixedHeader.no-js > .fixedHeader-revealableWrapper:hover > .fixedHeader-revealableContent{
    max-height:100%;
    overflow:auto;
}
/* < end no js */
.fixedHeader {
    position:fixed;/* doesnt *have* to be fixed if you really want a inline version */
    top:0;
    left:0;
    right:0;
    background-color:blue;
    z-index:999999;
}
/* revealable portion */
.fixedHeader-revealableWrapper {
    display:block;
    position:relative;
}
.fixedHeader-revealableWrapper > .fixedHeader-revealableContent {
    position:relative;
    padding:60px;
    background-color:#ee66ee;
    /* JS limits the max height to 100% of the viewport but you can apply you own fixed pixel height override here if you NEED to: 
    max-height:200px; 
    */
    overflow:auto;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.fixedHeader-revealableWrapper > .fixedHeader-revealableTrigger {
    position:absolute;
    top:100%;
    margin:auto;
    left:0;
    right:0;
    background-color:green;
    width:30%;
    text-align:center;
}

.touched {background-color:yellow!important;}

/* You can optionally auto-hide the header when this is matched. The JS will test if the #fixedHeader has a page-break-after of 'always'. If so, it will apply the auto-hide methods. */
@media only screen and (max-width: 460px) {
    .fixedHeader {
        background-color:purple;
        page-break-after:always;/* it is assumed you have not set page-break-after on the #fixedHeader outer element (seems unlikely) */
    }
}

JavaScript

/*! fixedheader 1.1
 * ==========================
 * @desc - 
 * @requires - jQuery 1.7+ | The associated css
 * @notes - 
 */
(function ($) {

    $.fn.fixedHeader = function (options) {

        // default settings
        var settings = $.extend({
            autohide: 0, //auto hide the header on scroll-down then reveal on scroll up. This OVERIDES the CSS derived setting (is if page-break-after:always is set)
            ready: null //optional function callback once initialised
        }, options);

        function getViewportHeight(){
            return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        };


        return this.each(function () {

            
            
            
            var vph = getViewportHeight();

            var $htmlbody = $("html,body"),
                $fixedHeader = $(this),
                $revealableWidget = $fixedHeader.find(".fixedHeader-revealableWrapper"),
                $revealableContent = $fixedHeader.find(".fixedHeader-revealableContent"),
                $foRevealableContent = $("<div class='fixedHeader-foRevealableContent'> </div>"),
                $revealableTrigger = $fixedHeader.find(".fixedHeader-revealableTrigger"),
                maxheight = vph - 100;
            
            var autohide = ($fixedHeader.css("page-break-after")=="always") || settings.autohide;
            
            $fixedHeader.removeClass("no-js");
            
            var scrolltop = parseInt($(window).scrollTop());
            
            var forcedMaxHeight = parseInt($revealableContent.css("max-height"));// if the developer has set a max-height try to honour it: 
            if(forcedMaxHeight>0 && forcedMaxHeight<maxheight){
                maxheight = forcedMaxHeight;
            }
            
            $revealableContent.css("max-height", maxheight + "px");
            var h = $revealableContent.outerHeight();
            var hh = $fixedHeader.outerHeight();

           ...