Sticky Nav with jQuery

Create a sticky navigation bar using jQuery

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

    <div class="fixed-nav">
        <div class="container-fluid max-width">
            <div class="nav-logo"> <a href="/">Brand</a>

            </div>
            <nav role="navigation">
                <ul class="main-nav">
                    <li><a href="/">Work</a>

                    </li>
                    <li><a href="/">Skills</a>

                    </li>
                    <li><a href="/">About</a>

                    </li>
                    <li><a href="/">Contact</a>

                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="sticky-nav">
        <div class="container-fluid max-width">
            <div class="nav-logo"> <a href="/">Brand</a>

            </div>
            <nav role="navigation">
                <ul class="main-nav">
                    <li><a href="/#">Work</a>

                    </li>
                    <li><a href="/#">Skills</a>

                    </li>
                    <li><a href="/#">About</a>

                    </li>
                    <li><a href="/#">Contact</a>

                    </li>
                </ul>
            </nav>
        </div>
    </div>

<div class="hero">
    <img class="img-responsive" src="http://www.placecage.com/2000/1000" />
</div>
<main class="container">
    <section>
         <h2>Work</h2>

    </section>
    <section>
         <h2>Skills</h2>

    </section>
    <section>
         <h2>About</h2>

    </section>
    <section>
         <h2>Contact</h2>

    </section>
</main>

SCSS

.max-width { max-width: 1170px; }

.main { padding-top: 200px;}

section { 
  padding: 60px 0;
  text-align: center;
}

nav {
	display: block;
	float: right;
	font-size: 21px;
}

.nav-logo {
	padding-top: 10px;
	display: block;
	float: left;
		
		
}

.sticky-nav { 
  position: fixed;   
  left: 0;  
  top: 0;  
  z-index: 100; 
	width: 100%;
  background-color: #ddd;
  display: block;
}

.fixed-nav { 
  position: absolute; 
  left: 0;  
  top: 0;
  width: 100%;
  background:#fff;
}

.main-nav {
	padding: 14px 0;
	font-weight: bold;

	li {
	    font-family: 'Roboto', sans-serif;
      font-size: 14px;
		  display: inline;
		  margin-left: 14px;
		  margin-right: 14px;
	}
    
    a { text-decoration: none; }
		
	a:hover {
		padding-bottom: 7px;
		border-bottom: 3px solid #000;
        color: #000;
	}

}

JavaScript

var stickyNav = function () {
      var width = $(window).width();
      var top = $(".hero").height();
      var scrollTop = $(window).scrollTop();

      if (scrollTop >= top) {
          $(".sticky-nav").slideDown();
      } else if (scrollTop >= 0) {
          $(".sticky-nav").slideUp();
      }
  };

  $(window).scroll(function () {
      stickyNav();
  });