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

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 class="fixedHeader-menu"><a href='#' class="fixedHeader-trigger">Menu Trigger</a>
        <ul>
            <li><a href=''>item</a></li>
            <li><a href=''>item</a></li>
            <li><a href=''>item</a></li>
        </ul>
    </div>
</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><a id="test" href="#">Ipsam</a>, 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>
   ...

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.2.2
 * ==========================
 * @desc - 
 * @requires - jQuery 1.7+ | The associated css
 * @notes - 
 */
(function ($) {
    
    
    /*
     * Example function to open/close the menu based on scroll position:
     */
    var distance = 500,
        revealed = false;
    $(window).on('scroll', function () {
        var scrolltop = parseInt($(window).scrollTop());
        if(scrolltop>=distance && !revealed){
            $(".fixedHeader-menu > ul").trigger("open");
            revealed = true;
        }
        if(scrolltop<distance && revealed){
            $(".fixedHeader-menu > ul").trigger("close");
            revealed = false;
        }
    });
    
    /*
     * Example of how you might trigger the opening of the revealable content from outside of the function
     */
    $("#test").on("click", function(){
        $(".fixedHeader-revealableContent").trigger("open");
        return false;
    });
    
    

    $.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 =...