Javascript 生成变量时未定义$

对于这个问题，这可能是一个非常简单的答案，但我似乎无法理解。我试图在滚动到底部时制作一个动画，但当我检查时，它会显示错误，“$未定义”，这是我的代码。谢谢

var navopen=false；
函数togglenav（）{
//document.getElementById（'navbody'）.classList.toggle（'w3-animate-zoom'）；
//document.getElementById（'navbody'）.classList.toggle（'w3-animate-zoomout'）；
//document.querySelector（“body”）.classList.toggle（“hide”）；
document.getElementById（“heading”）.classList.toggle（'hide'）；
//if（document.getElementById（“navbody”）.className==“w3动画缩放”）{
//document.getElementById（“navbody”）.style.display=“block”；
//document.getElementById（“navbody”）.className=“w3 animate zoomout”；
//}else if（document.getElementById（“navbody”）.className==“w3 animate zoomout”）{
//document.getElementById（“navbody”）.style.display=“无”；
//document.getElementById（“navbody”）.className=“w3动画缩放”；
//}其他{
//document.getElementById（“navbody”）.style.display=“block”；
//document.getElementById（“navbody”）.className=“w3动画缩放”；
// }
//if（document.getElementById（'navbody'）.classList.contains（'w3-animate-zoomout'））{
//document.getElementById（'navbody'）.classList.toggle（'hide'）；
//document.getElementById（'navbody'）.classList.remove（'w3-animate-zoomout'）；
//document.getElementById（'navbody'）.classList.add（'w3-animate-zoom'）；
//document.getElementById（'navbody'）.classList.remove（“hide”）；
//navopen=true；
//}else if（document.getElementById（'navbody'）.classList.contains（'w3-animate-zoom'））{
//navopen=false；
//document.getElementById（'navbody'）.classList.remove（'w3-animate-zoom'）；
//document.getElementById（'navbody'）.classList.add（'w3-animate-zoomout'）；
//document.getElementById（'navbody'）.classList.add（“隐藏”）；
// }
document.getElementById（'navbody'）.classList.toggle（'hide'）；
document.body.classList.toggle（'idk'）；
}
//$（文档）.ready（函数（）{
// });
//$（'#heading'）.fadeIn（1000）.removeClass（'hide'）；
window.setInterval（function（）{if（document.body.scrollTop>336）{document.getElementById（'heading'）.style.display='none'；}其他{document.getElementById（'heading'）.style.display=“block”}，10）；
var$animation_elements=$（'.thecard'）；
变量$window=$（window）；
$window.on（'scroll'，在视图中检查是否）；
$window.on（'scroll resize'，选中视图中的\u if\u）；
$window.trigger（'scroll'）；
函数检查\u如果\u在\u视图（）中{
var window_height=$window.height（）；
var window_top_position=$window.scrollTop（）；
变量窗口底部位置=（窗口顶部位置+窗口高度）；
$.each（$animation\u元素，function（）{
var$element=$（此）；
var element_height=$element.outerHeight（）；
var element_top_position=$element.offset（）.top；
变量元素底部位置=（元素顶部位置+元素高度）；
//检查当前容器是否在视口中
如果（（元素底部位置>=窗口顶部位置）&&
（元素顶部位置。卡片{
变换：旋转（180度）；
}
/*卡的正面，默认情况下显示*/
.前面{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边框左上半径：90px；
边框右下半径：90px；
背面可见性：隐藏；
溢出：隐藏；
背景：url（pianopic.png）；
背景尺寸：封面；
颜色：红色；
垂直对齐：中间对齐；
}
/*卡片背面，显示在鼠标上方*/
1.theback{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边框左上半径：90px；
边框右下半径：90px；
背面可见性：隐藏；
溢出：隐藏；
/*背景：#fafafa*/
颜色：#333；
文本对齐：居中；
变换：旋转（180度）；
}
/*此块（从这里开始）仅是翻转卡的样式，而不是翻转代码的基本部分*/
.前面的h1.后面的h1{
字体系列：“zilla slab”，无衬线；
填充：30px；
字体大小：粗体；
字体大小：24px；
文本对齐：居中；
}
.前面的p.后面的p{
字体系列：“zilla slab”，无衬线；
填充：30px；
字体大小：正常；
字体大小：12px；
文本对齐：居中；
}

钢琴生活
钢琴生活
关于我们
曾经想学钢琴但你不知道怎么学？找不到老师？没有钢琴？那很好！任何人都不应该为了实现梦想而学习。这就是为什么我们在钢琴生活
致力于帮助您掌握您的乐器梦想！顺便说一句，我们的产品是免费的，并且将永远免费。请查看我们提供的以下内容：
在线钢琴！
使用我们的在线钢琴，如果你没有免费！

$

保存jQuery全局变量；在脚本中使用jQuery库之前，需要加载它。只需按如下顺序翻转：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>

---

谢谢@Leftium！！！它成功了。但是既然你在这里，你知道为什么javascript中的“从下到下”动画在一大堆行之后都不起作用吗？如果不起作用，没关系，你解决了我的主要问题！