<style type="text/css">

nav {
    position:absolute;
    bottom:0;
    left:0;
    background-color:#eee;
    box-sizing:border-box;
    width:100%;
    padding:20px;
}

nav.fixed-position {
    position:fixed;
    top:0;
    bottom:initial;
}

</style>

<div>

    <div id="hero">

        <nav id="nav-menu">
            Your nav here
        </nav>

    </div>

    <section style="height:2000px;">

        content

    </section>

</div>

<script type="text/javascript">

    var hero = document.getElementById('hero'),
        nav = document.getElementById("nav-menu"),
        viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
        navOffsetTop = nav.offsetTop;

    hero.style.height = viewPortHeight + 'px';

    var hasScrolled = function() {

        var fromTop = document.body.scrollTop || document.documentElement.scrollTop || 0;

        if (navOffsetTop < fromTop) {
            nav.classList.add('fixed-position');
        } else {
            nav.classList.remove('fixed-position');
        }

    }

    window.addEventListener('scroll', hasScrolled);

</script>