javascript - 我如何在我的 Js 查询中定义 $

Question

我正在尝试运行 JQuery 来执行固定滚动，以便页面可以向上滚动，但将我的页面的一部分固定在顶部。下面是我使用的 Jquery、css 和 HTML。有人可以告诉我我做错了什么吗？？

JQuery Error Message: Uncaught ReferenceError: $ is not defined

HTML:

排骨之家:La Mango

              <div>
              <nav id="main-nav">
                  <ul>
                      <li>
                          <i class="icon ion-search placeholder-icon"></i>
                          Find a Hangout Spot
                      </li>
                  </ul>
              </nav>
              </div>
              <span id="mine"></span>

CSS:

ul{
  margin: 0;
  color: white;
  padding: 5px 20px 5px 20px;
  list-style-type: none;
  background: #EF5350;
}
ul li{
  display: inline-block;
  padding: 6px;
  vertical-align: top;
}
.fixed-nav{
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0;
}

JQuery:

var offset = $('#main-nav').offset();
$(window).scroll(function(){
   //$('#mine').text($(document).scrollTop());
  $('#main-nav').addClass('fixed-nav');
  if($(document).scrollTop() < 10){
         $('#main-nav').removeClass('fixed-nav');
  }
});

Answer 1

首先检查是否包含了 Jquery，如果你正在使用原型(prototype)(Magento 使用它)或其他使用 $ 的库，用 IIFE 包装你所有的 jquery 代码，这样你就可以使用 $ 安全地在里面。

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

Javascript

(function($){ //$ is now jQuery

  var offset = $('#main-nav').offset();
  $(window).scroll(function(){
    //$('#mine').text($(document).scrollTop());
    $('#main-nav').addClass('fixed-nav');
    if($(document).scrollTop() < 10){
         $('#main-nav').removeClass('fixed-nav');
    }
  });

})(jQuery);