How to setup a fixed navbar using javascript when you have an extra header on top of it. Or, a fading navbar.

javascript.js.coffee

# The basic idea here is that you set a num of pixels before triggering the css "fixed" 
# which would freeze whatever you div attribute you set, in this case"nav".
# This is a simple way to do it but there's a library you can use to do the same thing.
# http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

num = 250 #number of pixels before modifying styles
$(window).bind "scroll", ->
  if $(window).scrollTop() > num
    $("nav").addClass "fixed"
  else
    $("nav").removeClass "fixed"
      
# Here's another way to write the code

$(window).on "scroll", ->
  if $(window).scrollTop() >= 462 and not $("nav").hasClass("naxed-top")
     $("nav").addClass "fixed"
  else $("nav").removeClass "navbar-fixed-top"  if $(window).scrollTop() < 462 and $("nav").hasClass("navbar-fixed-top")
  
# This is a way to first hide the navbar and then make it appear once it passes .navbar height
  
$('.homepage-navbar').hide()
  starting_position = $('.navbar').outerHeight(true)
  $(window).scroll ->
    yPos = ($(window).scrollTop())
    if yPos > starting_position
      $('.homepage-navbar').fadeIn()
    else
      $('.homepage-navbar').fadeOut()  

style.css

.fixed {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
}