javascript - 脚本不工作(但在其他网站上工作正常)

Question

好吧，这可能是个愚蠢的问题，但我会问的。当您在滚动时通过页面上的一个点时，我试图制作一个 div 棒。我有这个脚本:

<script type="text/javascript">
$(document).ready(function() {
       var s = $("#sticker");
       var pos = s.position();                    
         $(window).scroll(function() {
       var windowpos = $(window).scrollTop();
         if (windowpos >= pos.top + 335) {
           s.addClass("stick");
      } else {
          s.removeClass("stick"); 
      }
   });
});
</script>

这在我的网站之一上运行良好。但现在我正在一个新网站上尝试。每次我在控制台日志中收到一条错误消息:TypeError: $ is not a function当我查看代码中的错误时，它突出显示了 $(document).ready(function() {部分。

如果我删除 $(document).ready部分和 });它告诉我 var s = $("#sticker");部分是 $ is not a function .

我试过了

<script type="text/javascript">
 jQuery(document).ready(function() {
       var s = $("#sticker");
       var pos = s.position();                    
         $(window).scroll(function() {
       var windowpos = $(window).scrollTop();
         if (windowpos >= pos.top + 335) {
           s.addClass("stick");
      } else {
          s.removeClass("stick"); 
      }
   });
});
</script>

然后它会跳过 (document).ready部分，但它再次告​​诉我我的 var部分不是函数。

如果我删除脚本，我不会有任何控制台日志消息。可能是什么问题呢？我尝试将代码放在 header 中和 footer甚至就在 <div id="sticker">...</div> 之前.似乎没有任何效果。该脚本在其他站点上完美运行...

Answer 1

您正在 noConfilct 模式下运行 jQuery。这意味着，jQuery 只能通过 jQuery 使用，不能通过 $ 使用。您可以使用 就绪状态 或 IIFE 包装您的代码，以通过 $ 访问 jQuery。

就绪状态:

jQuery(document).ready(function($) {
    // access jQuery by '$' inside
});

// this is a shorthand for the above '.ready' creation
jQuery(function($) {
    // access jQuery by '$' inside
});

IIFE:

(function($) {
    // access jQuery by '$' inside
})(jQuery);