Rails -在导航栏上使用Javascript

我正试图将粘性导航栏集成到Rails应用程序中，我无法让Javascript工作。我看到过类似的问题，但没有一个解决这个问题，因为我相信这是非常基本的。

参见演示:http://codepen.io/Guilh/details/JLKbn/

我有以下的HTML在我的_header.html.erb文件:

<header>
  <h1>This is a Sticky Nav Demo!</h1>
  <p>Creating one of these isn't so bad. Let's learn how with this sweet little demo!</p>
</header>
<nav class="main-nav">
  <a href="#">Nav Link 1</a>
  <a href="#">Nav Link 2</a>
  <a href="#">Nav Link 3</a>
  <a href="#">Nav Link 4</a>
</nav>

Javascript/jQuery为:

var  mn = $(".main-nav");
mns = "main-nav-scrolled";
hdr = $('header').height();
$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

我的application.js文件看起来像这样:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

我把Javascript放在Asset Pipeline在assets/javascript。我不太擅长js，我不太确定如何称呼它。我试着用$(document).ready(function(){};包装它。我还尝试将其放在_header.html.erb文件本身的<script>标签中。