Question

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

JQuery错误消息：未捕获的ReferenceError：$未定义

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，如果您正在使用原型（Magento使用它）或其他使用$的库将所有jquery代码包装为IIFE，那么您可以使用$安全地进入。

<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);

Answer 2

您可以尝试使用与$不同的符号来调用jQuery函数和对象，但首先检查jQuery是否正确加载。

我通常使用此函数来规避其他库使用$符号的问题：

var jj = jQuery.noConflict(); //Now use jj instead of $ to call jQuery things
jj("p").css("color", "red");

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

2 个答案: