Fire NavBar

Fire NavBar.markdown

Fire NavBar

A Pen by Philip on CodePen.

License.

index.jade

#menu.text-center.slideDown
  a.btn#logo.large
    h1#logo-name Fire
    img#logo-img(src="http://dl.hiapphere.com/data/icon/201409/HiAppHere_com_kov.theme.lumos.png")
    
#footer.text-center
  p @warkentien2

script.js

$(document).ready(function() {
  $(window).scroll(function() {
    var wScroll = $(this).scrollTop(),
        $logo = $('#logo'),
        $menu = $('#menu'),
        body = document.body,
        html = document.documentElement,
        docHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );

    if ( wScroll >= 100 && $logo.hasClass('large') ) {
      $logo.toggleClass('small large');
    }
    else if( wScroll < 100 && $logo.hasClass('small') ){
      $logo.toggleClass('small large');
    }
    else if( wScroll > docHeight - 1.25*window.innerHeight && $menu.hasClass('slideDown') ) {
      $menu.toggleClass('slideUp slideDown');
    }
    else if(wScroll <= docHeight - 1.25*window.innerHeight && $menu.hasClass('slideUp') ) {
      $menu.toggleClass('slideUp slideDown');
    }
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.sass

@import url('https://fonts.googleapis.com/css?family=Lily+Script+One')

body
  background: #436C5E
  height: 3000px
  
#logo-name
  font-family: 'Lily Script One', cursive
  font-size: 3.5em
  margin-left: -.25em

#menu
  position: fixed
  background: white
  width: 100%
  box-shadow: 0 2px 5px #32533D
  a.large
    height: 12.5em
    transition: all 1s ease-in-out
    img
      position: relative
      z-index: 2
      height: 7em
      top: -2em
      transition: all 1s ease-in-out
    h1
      position: relative
      color: #436C5E
      opacity: 1
      top: -.25em
      transition: all 1s ease-in-out
  a.small
    height: 4.75em
    transition: all 1s ease-in-out
    img
      position: relative
      z-index: 2
      height: 4em
      top: -6em
      transition: all 1s ease-in-out
    h1
      position: relative
      opacity: 0
      top: -3em
      transition: all 1s ease-in-out
      
.slideUp
  transition: transform .5s ease-in-out
  transform: translateY(-5em)
.slideDown
  transition: transform .5s ease-in-out
  transform: translateY(0)
      
#footer
  position: relative
  top: 3000px
  padding: .5em
  width: 100%
  background: #32533D
  p
    color: white
    margin-top: 5px

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />