<body>

<div id="top-content-container">
<div id="nav-padding">
<div id="nav-container">
<div id="main-nav">
  <span class="menu-height">
  <div class="nav-top">
<!--     <img class="desktop-only" src="{% static 'images/maah-logo-full.png' %}" />
  <img class="mobile-only" src="{% static 'images/maah-logo-building.png' %}" /> -->
  <i class="fa fa-book fa-icon" aria-hidden="true"></i>
  <span class="org">The Name of The Place</span>
  <span class="mobile-only mobile-toggle"><i class="fa fa-bars"></i></span>
  </div>
<ul id="menu">
  <li><a href="#">Visit</a></li>
  <li><a href="#">Exhibits</a></li>
  <li><a href="#">Events</a></li>
  <li><a href="#">Education</a></li>
  <li><a href=" #">Support</a></li>
  <li class="social-nav mobile-only">
    <a href="#"><span class="socicon-facebook social facebook"></span></a>
    <a href="#"><span class="socicon-twitter social twitter"></span></a>
  </li>
</ul>
<div class="social-nav desktop-only">
<a href=" https://www.facebook.com/maah.org"><span class="socicon-facebook social facebook"></span></a>
<a href="https://twitter.com/MAAHMuseum"><span class="socicon-twitter social twitter"></span></a>
  </div>
  <div class="more-nav desktop-only">More</div>
  </span>
  <div class="nav-bottom">
    <a href="http://www.maah.org/join.htm"><button>Membership</button></a>
    <a href="http://www.maah.org/donate.htm"><button>Donation</button></a>
  </div>
  <div id="flyout" class="nav-flyout">
    <div class="content">
    <ul>
      <li>Lend Your Support</li>
      <li><a href="#">Individual & Family Membership</a></li>
      <li><a href="#">Corporate Membership</a></li>
      <li><a href="#">Donate</a></li>
      <li><a href="#">Donate to Collections</a></li>
      <li><a href="#">Sponsorship & Partners</a></li>
    </ul>
    <ul>
      <li>Locations</li>
      <li><a href="#">Main Location</a></li>
      <li><a href="#">Other Important Location</a></li>
      <li><a href="#">Museum Store</a></li>
    </ul>
    <ul>
      <li>About The Museum</li>
      <li><a href="#">Facility Rentals</a></li>
      <li><a href="#">Educational Programs</a></li>
      <li><a href="#">Our Supporters</a></li>
      <li><a href="#">Museum Store</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Links</a></li>
    </ul>

    </div>
  </div>
</div>
</div>
</div>
  
  <div class="body-content">
    <h1 class="headline">Fixed Navigation</h1>
    <h2 class="headline">Desktop Features</h2>
    <ul class="features">
      <li>Fixed nav</li>
      <li>Flyout "more" nav closes on scroll or click outside</li>
      <li>Nav becomes absolute positioned before the footer at the bottom of the page</li>
    </ul>
    <h2 class="headline">Mobile Features</h2>
    <ul class="features">
      <li>Sticky nav</li>
      <li>Expanded nav closes on scroll</li>
      <li>Flyout "more" nav becomes the footer</li>
      <li>Hides on scroll down</li>
      <li>Reappears on scroll up</li>
      <li>Reappears on bottom of the page</li>
    </ul>
  </div>
  
  
</div>
<div id="footer">
  <div class="footer-content">
    <h2 class="headline">Footer</h2>
    <p>This is a footer. woo hoo</p>
  
  </div>
</div>
  
</body>
@import url(https://fonts.googleapis.com/css?family=Cantarell:400,400i,700|Fjalla+One|Hind:400,300,600);



// Colors
$maroon: #9E0009;
$tan: #FFFCF2;
$grey-one: #333333;
$grey-two: #C8C7C3;
$grey-three: #EDEDED;
$white: #FFFFFF;

$nav-desktop-width: 270px;
$nav-mobile-width: 100%;

$gutter: 25px;

$desktop-width: 1280px;

$bkp-small: 500px;
$bkp-medium: 800px;
$bkp-large: 1000px;
$bkp-extra-large: 1300px;

#top-content-container{
  min-height:1400px;
  display:block;
  overflow:hidden;
  position:relative;
}

#nav-padding{
  max-width: $desktop-width;
  margin:0 auto;
  position: relative;
  display: block;
  z-index: 4000;
  padding: 0 0 0 10px;
  @media screen and (min-width: $bkp-medium) {
    position: relative;
    padding: 0 0 0 27px;
  }
  @media screen and (min-width: $bkp-extra-large) {
    padding: 0 0 0 10px;
  }
}

#nav-padding.unfix{
  position: absolute;
  bottom: 0;
  right: auto;
  left: auto;
  @media screen and (min-width: $bkp-extra-large) {
    /*right: 220px;*/
    left: 0;
    right: 0;
    margin: auto;
    width:100%;
  }
  #nav-container{
    position: relative;
  }
}

#nav-container{
  /*position: relative;
  width: auto;
  padding: 0px;*/
  height: 105px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  @media screen and (min-width: $bkp-medium) {
    position: fixed;
    padding: 20px 0 0 0;
    top:auto;
    left: auto;
    width: auto;
    height: auto;
  }
}


#nav-container.active{
  max-width: $desktop-width;
  width: 100%;
}

#main-nav{
  -webkit-font-smoothing: antialiased;
  width: $nav-mobile-width;
  text-transform: none;
  color: $grey-one;
  margin: 0;
  z-index: 3000;
  @media screen and (min-width: $bkp-medium) {
    width: $nav-desktop-width;
  }
}

.menu-height{
  overflow:hidden;
  display: block;
  background-color:$grey-three;
}

.nav-flyout{
  display:none;
  position:absolute;
  left: $nav-desktop-width;
  top:0px;
  /*width: calc(100% - #{$nav-desktop-width*2+40px});*/
  width: 100%;
  max-width: 1280-$nav-desktop-width;
  height:300px;
  background-color: $grey-one;
  margin: 20px 0 0 0;
  .content{
    width:90%;
    margin:20px auto;
    padding:20px;
  }
  ul{
    font-family: 'Cantarell', sans-serif;
    list-style-type: none;
    margin:0 60px 20px 0;
    padding:0;
    display:table;
    float:left;
    a{
      &:link,&:active,&:visited{
        color:$white;
        text-decoration:none;
        border-bottom: 1px solid transparent;
        transition: .3s border ease;
      }
      &:hover{
        border-bottom: 1px solid $white;
      }
    }
    li{
      color:$white;
      margin:0;
      padding: 0 0 .4rem 0;
    }
    li:first-child{
      font-size:1.5rem;
    }
  }
}

.social-nav{
  padding:0 20px 20px 20px;
  overflow:hidden;
}

.more-nav{
  font-family: 'Cantarell', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.875rem;
  padding: 10px 20px;
  color:$white;
  overflow:hidden;
  background-color:$grey-two;
  cursor:pointer;
  transition: .5s all ease;
  &:hover{
    background-color:$grey-one;
  }
  &:after{
    content:'+';
    float:right;
  }
}

.more-nav.active{
  background-color:$grey-one;
  &:after{
    content:'-';
    float:right;
  }
}

#menu{
  list-style-type:none;
  margin: 15px 0;
  padding:0;
  display: none;
  @media screen and (min-width: $bkp-medium) {
    display: block;
  }
  li{
    font-family: 'Cantarell', sans-serif;
    font-weight: 400;
    padding: 5px 20px;
    font-size: 1.5rem;
    line-height: 1.875rem;
    cursor:pointer;
    margin:0;
    &:hover{
      background-color: $grey-two;
    }
    &.social-nav:hover{
      background-color: transparent;
    }
    a:link, a:visited, a:active, a:hover{
      color:$grey-one;
      text-decoration: none;
    }
    .social{
        line-height: 16px;
      }
  }
}

.nav-top{
  font-family: 'Times', serif;
  line-height: 1.2rem;
  background-color:$white;
  border-top:6px solid $maroon;
  border-bottom:6px solid $maroon;
  font-size: 1.2rem;
  padding:5px 10px;
  overflow: hidden;
  @media screen and (min-width: $bkp-medium) {
    font-size: 2.2rem;
    padding:10px 0;
    border-top:0px;
    line-height: 2rem;
  }
  .fa-icon{
    color:$grey-two;
    float:left;
    font-size:2.75rem;
    margin-right:10px;
    @media screen and (min-width: $bkp-medium) {
      display:block;
      font-size:3.8rem;
      float:left;
    }
  }
  .org{
    font-size: 1.3rem;
    line-height:1.25rem;
    width:40%;
    display:table;
    float:left;
    @media screen and (min-width: $bkp-medium) {
      font-size:1.65rem;
      line-height:1.85rem;
      width:70%;
    }
  }
}

button, .button-text{
    font-family: 'Cantarell', sans-serif;
    font-weight: 100;
    border:none;
    text-transform:uppercase;
    cursor:pointer;
    transition: .3s all ease;
}

.button-text{
  font-size: 1rem;
  color:$maroon;
  border:1px solid $maroon;
  display: table;
  line-height:2.5rem;
  padding:0px  1.25rem;
  &:hover{
      background-color: $maroon;
      border:1px solid $maroon;
      color:$white;
      /*text-decoration: none;*/
    }
}

a:hover{
  text-decoration: none;
}

.nav-bottom{
  background-color:$white;
  padding:5px 0;
  @media screen and (min-width: $bkp-medium) {
    background-color:transparent;
    padding:15px 0;
  }
  button{
    color:$white;
    padding:5px 0px;
    background-color: $maroon;
    font-size: .85rem;
    width:46%;
    margin-right: 0;
    margin-left: 2.5%;
    border:1px solid $white;
    text-align: center;
    @media screen and (min-width: $bkp-medium) {
      margin-right: 2.5%;
      margin-left: 0;
    }
    &:hover{
      background-color: $white;
      border:1px solid $maroon;
      color:$maroon;
    }
  }
  a:nth-child(2n) button{
    margin-right: 0px;
    margin-left: 2.5%;
  }
}

.twitter{
  background-color:#4da7de;
}

.twitter:hover{
  color: #4da7de;
  border: 1px solid #4da7de;
}

.facebook{
  background-color: #3e5b98;
}

.facebook:hover{
  color: #3e5b98;
  border: 1px solid #3e5b98;
}

.social{
  display: block;
  color:#fff;
  font-size: 16px;
  padding: 8px;
  margin:0 10px 0 0;
  border-radius:200px;
  cursor: pointer;
  border:1px solid transparent;
  transition: .2s all ease;
  float:left;
  height:15px;
  width:15px;
}

.social:hover{
  background-color: transparent;
}


.nav-top{
  .mobile-only{
    display: table;
    float: left;
    @media screen and (min-width: $bkp-medium) {
      display: none;
    }
  }
  img.mobile-only{
    max-width: 35px;
    margin-right:15px;
  }
}

.nav-top .mobile-toggle{
  &:after{
    content:'';
    // background: url('/static/images/hamburger.png');
    width: 15px;
    height: 15px;
    display: block;
    background-size: cover;
    margin: .15rem;
  }
  margin-top:1%;
  text-align: center;
  padding: 11px 5px 0 5px;
  display: block;
  color:$white;
  float: right;
  width:30px;
  height:30px;
  border-radius: 20px;
  background-color: $maroon;
  font-weight: 700;
  @media screen and (min-width: $bkp-medium) {
    display: none;
  }
}

.nav-top span.mobile-toggle.minus{
  .fa{
    display:none;
  }
  &:after{
    font-family:arial;
    font-size: 1.8rem;
    font-weight: 200;
    content:"+";
    background: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: .05rem .16rem;
    width:25px;
    text-align:center;
  }
}

.desktop-only{
  display: none;
  @media screen and (min-width: $bkp-medium) {
    display:block;
  }
}

.mobile-only{
  display: block;
  @media screen and (min-width: $bkp-medium) {
    display:none;
  }
}

// Demo page styles
body{
  -webkit-font-smoothing: antialiased;
  margin:0;
  width:100%;
}


.body-content{
  max-width: 100%;
  padding:0 $gutter;
  margin: 130px auto 0 auto;
  @media screen and (min-width: $bkp-medium) {
      max-width: calc(#{$desktop-width} - #{$nav-desktop-width}- #{$gutter});
      padding:0 0 0 $nav-desktop-width+$gutter*3;
      margin: 0 auto;
  }
}

.headline{
  font-family: 'Hind', sans-serif;
  color:$grey-one;
}

h1{
  font-weight:300;
  font-size:3rem;
  line-height:3rem;
  margin-bottom:20px;
}

h2{
  font-weight:300;
  font-size:2rem;
  line-height:1rem;
}

p,ul{
  font-family:arial;
}



ul.features {
  list-style-type:none;
  margin:0 0 $gutter*1.5 0;
  padding:0 0 0 $gutter*1.2;
  li{
    margin:0 0 $gutter/2 0;
  }
  li:before {    
    font-family: 'FontAwesome';
    content: '\f0a4';
    margin:0 10px 0 -25px;
    color: $grey-two;
  }
  li{
    &:hover{
      cursor: none;
    }
    &:hover:before{
      color: $grey-one;
    }
  }
}

#footer{
  background-color:$grey-two;
  padding:$gutter 0;
}

.footer-content{
  min-height:$nav-desktop-width/1.3;
  max-width:$desktop-width;
  padding:0 $gutter;
  margin:0 auto;
}
View Compiled

var width = $(window).width();
var menuHeight = "";



$(window).load(function() {

  menuHeight = $(".menu-height").height();

  $(".more-nav").click(function(){
    $(".nav-flyout").css('height',menuHeight).toggle();
    $(".more-nav").toggleClass("active");
    $("#nav-container").toggleClass("active");
  });
  
    
    if (width < 500) {
      mobileFixed();
      
      //  COMMENT OUT TO REMOVE FLYOUT FOOTER ON MOBILE
      var mobilefooter = document.getElementById("flyout").innerHTML;
      document.getElementById("footer").innerHTML = mobilefooter;
      
    }else{
      fixedDeskNav();
    }

});



// CLOSE FLYOUT ON CLICK OUTSIDE AND SCROLL
$(document).on("mousedown touchstart",function(e){
  var $flyout = $('#flyout');
  var $morelink = $('.more-nav');
  if (!$flyout.is(e.target) && !$morelink.is(e.target) && $flyout.has(e.target).length === 0) {
    $flyout.hide();
    $(".more-nav").removeClass("active");
    $("#nav-container").removeClass("active");
  }
});

$(window).scroll(function(e){
  var $flyout = $('#flyout');
  var $morelink = $('.more-nav');
  if (!$flyout.is(e.target) && !$morelink.is(e.target) && $flyout.has(e.target).length === 0) {
    $flyout.hide();
    $(".more-nav").removeClass("active");
    $("#nav-container").removeClass("active");
  }
});




var resizeId;
$(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
});
 
 
function doneResizing(){
    width = $(window).width();
    menuHeight = $(".menu-height").height();
    // console.log(width);
    fixedDeskNav();
    // console.log(width);
    if (width < 500) {
        mobileFixed();
        if ($(".mobile-toggle").hasClass('minus')){
              $(".mobile-toggle").toggleClass("minus", 1000);
              $("#menu").slideUp();
        }
      }else{
        fixedDeskNav();
        $("#menu").slideDown();
      }
}


// STOP FIXED NAV AT FOOTER ON DESKTOP
function fixedDeskNav(){

 
      // var maps = $("#maps").height();
      var footer = $("#footer").height();
      

      var bottom = $('#footer').offset().top-footer-menuHeight/2;
      console.log(bottom);

      $(window).scroll(function(){
          if ($(this).scrollTop() > bottom){
               console.log("bottom reached");
              $('#nav-padding').addClass('unfix');
          }
          else{
              $('#nav-padding').removeClass('unfix');
          }
      });

}


$(".mobile-toggle").click(function(){
  $("#menu").slideToggle();
  $(this).toggleClass("minus", 1000);
});



// MOBILE STICKY NAV
function mobileFixed(){

          $(window).scroll(function(){
              
              if ($(".mobile-toggle").hasClass('minus')){
                    $(".mobile-toggle").toggleClass("minus", 1000);
                    $("#menu").slideUp();
              }
          });

          ;( function ( document, window, index )
          {
            'use strict';
          
            var elSelector  = '#nav-container',
              element   = document.querySelector( elSelector );

            if( !element ) return true;

            var elHeight    = 0,
              elTop     = 0,
              dHeight     = 0,
              wHeight     = 0,
              wScrollCurrent  = 0,
              wScrollBefore = 0,
              wScrollDiff   = 0;

            window.addEventListener( 'scroll', function()
            {
              elHeight    = element.offsetHeight;
              dHeight     = document.body.offsetHeight;
              wHeight     = window.innerHeight;
              wScrollCurrent  = window.pageYOffset;
              wScrollDiff   = wScrollBefore - wScrollCurrent;
              elTop     = parseInt( window.getComputedStyle( element ).getPropertyValue( 'top' ) ) + wScrollDiff;

              if( wScrollCurrent <= 0 ) // scrolled to the very top; element sticks to the top
                element.style.top = '0px';

              else if( wScrollDiff > 0 ) // scrolled up; element slides in
                element.style.top = ( elTop > 0 ? 0 : elTop ) + 'px';

              else if( wScrollDiff < 0 ) // scrolled down
              {
                if( wScrollCurrent + wHeight >= dHeight - elHeight )  // scrolled to the very bottom; element slides in
                  element.style.top = ( ( elTop = wScrollCurrent + wHeight - dHeight ) < 0 ? elTop : 0 ) + 'px';

                else // scrolled down; element slides out
                  element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) + 'px';
              }

              wScrollBefore = wScrollCurrent;
            });

          }( document, window, 0 ));
    
}

Run Pen

External CSS

  1. https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://use.fontawesome.com/e49a439a1c.js