Rails-在導航欄上使用Javascript

Question

我試圖將粘性導航欄集成到Rails應用程序中，但我無法使Javascript工作。 我見過類似的問題，但我都沒有解決這個問題，因為我敢肯定這很基本。

觀看演示， 網址為： http : //codepen.io/Guilh/details/JLKbn/

我的_header.html.erb文件中包含以下HTML：

<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>標記中。

Answer 1

您確定您正在使用該程序所需的所有JavaScript文件嗎？ 例如，您是否將此腳本添加到html文件？

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

當您轉到演示頁面時，右鍵單擊它，然后查看源代碼副本並粘貼該代碼。 它應該作為html文件工作。 希望我能正確理解您。