Sticky-kit.js官方示例无法使用，控制台报JS错误求助

兄弟，你碰到的问题其实是两个经典的前端资源加载问题凑一块儿了，我帮你拆解下，一步步搞定：

1. 先搞定「混合内容阻塞」的问题 #

控制台里的Mixed Content错误是因为你的页面用HTTPS加载，但引用的部分脚本还是HTTP协议的——现在浏览器对安全要求很高，这种跨协议的资源请求会直接被拦下来，脚本加载失败自然就没法运行了。

修复起来很简单：

• 把所有外部脚本（包括jQuery、Sticky-kit本身）的链接开头从http://改成https://；
• 嫌麻烦的话也可以用协议相对URL，比如写成//cdn.example.com/jquery.min.js，浏览器会自动匹配当前页面的HTTPS协议。

2. 解决「$ is not defined」的核心问题 #

这个错误直接说明jQuery没加载成功，而Sticky-kit完全依赖jQuery，这就是插件失效的根本原因。你得注意这几点：

• 加载顺序不能乱：必须先加载jQuery，再加载Sticky-kit脚本——就像你得先有工具才能干活，jQuery就是Sticky-kit的工具；
• 用靠谱的HTTPS链接加载jQuery，比如官方CDN：

  <!-- 先加载jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 再加载Sticky-kit -->
  <script src="https://cdn.jsdelivr.net/npm/sticky-kit@1.1.3/dist/sticky-kit.min.js"></script>
  

• 如果页面里有其他框架（比如Zepto）和jQuery冲突，覆盖了$，那可以直接用jQuery代替$来调用Sticky-kit，比如：

  jQuery('.your-sticky-target').stick_in_parent();
  

最后验证一下 #

按上面的步骤改完后，刷新页面看看控制台还有没有错误，再测试Sticky-kit的粘滞功能——应该就能正常工作了，连官方示例页的问题也会跟着解决，因为示例页的问题本质也是一样的~

内容的提问来源于stack exchange，提问作者Rober