这可能是这个问题的真正简单答案，但是我似乎无法想到。当您滚动到底部动画时，我正在尝试制作动画，但是当我检查时，它显示错误“未定义$”。这是我的代码。谢谢！
var navopen = false;
function 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-animate-zoom"){
// 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 = "none";
// document.getElementById("navbody").className = "w3-animate-zoom";
// }else{
// document.getElementById("navbody").style.display = "block";
// document.getElementById("navbody").className = "w3-animate-zoom";
// }
// 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("hide");
// }
document.getElementById('navbody').classList.toggle('hide');
document.body.classList.toggle('idk');
}
// $(document).ready(function () {
// });
// $('#heading').fadeIn(1000).removeClass('hide');
window.setInterval(function(){if(document.body.scrollTop>336){document.getElementById('heading').style.display = 'none';}else{document.getElementById('heading').style.display = "block"}},10);
var $animation_elements = $('.thecard');
var $window = $(window);
$window.on('scroll', check_if_in_view);
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}body{
width: 100vw;
height: 100vh;
overflow-x: hidden;
padding: 0px;
margin: 0px;
/* background: url(headingimage.jpg); */
background-size: cover;
background-color: rgb(200, 400, 400);
}
html{
padding: 0px;
margin: 0px;
scroll-behavior: smooth;
}
.idk{
background: url(headingimage.jpg);
background-size: cover;
}
#headingcontainer {
line-height: 100%;
height: 100%;
/* border: 3px solid green; */
text-align: center;
width: 100%;
background-image: url(headingimage.jpg);
background-size: cover;
background-attachment: fixed;
height: 100%;
width: 100%;
/* display: flex;
position: fixed;
align-items: center;
justify-content: center; */
}
#desc{
text-align: center;
margin: 50px;
margin-top: 200px;
position: relative;
border: 5px solid red;
border-top-left-radius: 90px;
border-bottom-right-radius: 90px;
margin-left: 50px;
margin-right: 50px;
padding: 60px;
background-color: grey;
}
#heading {
font-size: 50px;
font-family: 'Rubik Mono One';
color: white;
/* position: fixed; */
z-index: 0;
position: fixed;
}
#arrowdown{
/* margin-top: 30px; */
display: block;
text-align: center;
width: 3%;
text-align: center;
margin: auto;
/* margin-top: 1%; */
border-radius: 100%;
border: 3px solid white;
}
#navbar{
position: fixed;
left: .5%;
top: 2%;
width: 40px;
z-index: 100000;
height: 30px;
cursor: pointer;
}
#line1{
margin-bottom: 10px;
background-color: red;
border: 1px solid black;
width: 100%;
/* border: 2px solid black;
*/
border-radius: 90px;
height: 20%;
/* z-index: 10000; */
}
#line2{
margin-bottom: 10px;
background-color: red;
border: 1px solid black;
width: 100%;
/* border: 2px solid black;
*/
border-radius: 90px;
height: 20%;
/* z-index: 10000; */
}
#line3{
margin-bottom: 10px;
border: 1px solid black;
background-color: red;
width: 100%;
/* border: 2px solid black;
*/
border-radius: 90px;
height: 20%;
/* z-index: 10000; */
}
#navbody{
width: 100%;
height: 100%;
position:relative;
/* display: none; */
}
#navback{
background-color: rgb(59, 55, 55);
width: 100vw;
height: 100vh;
position: fixed;
z-index: 10000;
}
.hide{
display:none;
opacity: 1;
}
.navbutton{
text-align: center;
width: 20%;
border-radius: 20px;
margin: auto;
padding: 10px;
cursor:pointer;
margin-top: 50px;
background-color: red;
border: 2px solid black;
}
/*youtube fun!*/
/*Thank you so much Arjun Khara here is his awesome vid: https://www.youtube.com/watch?time_continue=32&v=OV8MVmtgmoY
/* THE MAINCONTAINER HOLDS EVERYTHING */
.maincontainer{
position: relative;
width: 320px;
height: 320px;
background: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* border-top-left-radius: 90px;
border-bottom-right-radius: 90px; */
/* border: 5px solid blue; */
margin-top: -20px;
}
/* THE CARD HOLDS THE FRONT AND BACK FACES */
.thecard{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top-left-radius: 90px;
border-bottom-right-radius: 90px;
border: 5px solid red;
transform-style: preserve-3d;
transition: all 0.8s ease;
}
/* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */
.maincontainer:hover>.thecard{
transform: rotateY(180deg);
}
/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
.thefront{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top-left-radius: 90px;
border-bottom-right-radius: 90px;
backface-visibility: hidden;
overflow: hidden;
background:url(pianopic.png);
background-size: cover;
color: red;
vertical-align: middle;
}
/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */
.theback{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top-left-radius: 90px;
border-bottom-right-radius: 90px;
backface-visibility: hidden;
overflow: hidden;
/* background: #fafafa; */
color: #333;
text-align: center;
transform: rotateY(180deg);
}
/*This block (starts here) is merely styling for the flip card, and is NOT an essential part of the flip code */
.thefront h1, .theback h1{
font-family: 'zilla slab', sans-serif;
padding: 30px;
font-weight: bold;
font-size: 24px;
text-align: center;
}
.thefront p, .theback p{
font-family: 'zilla slab', sans-serif;
padding: 30px;
font-weight: normal;
font-size: 12px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Piano Life</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="icon.png" rel="icon">
<link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="w3.css">
</head>
<body class="" id="body">
<div id="navbar" onclick="togglenav();">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
<div id="navbody" class="hide">
<div id="navback">
<a href="#"><button class="navbutton w3-display-topmiddle" onclick="togglenav();">Home</button></a>
</div>
</div>
<div id="headingcontainer">
<h1 id="heading" class="w3-display-middle">Piano Life</h1>
</div>
<h1 class="headingdescription">About Us</h1>
<h2 id="desc">Ever wanted to learn the piano but you just don't know how? Can't get a teacher? Don't have a piano? Thats totally fine! Nobody should be held back from learning to achieve their dreams. So that's why us at <strong>Piano Life</strong>
</strong>is dedicated to helping you master your instrumental dreams! And by the way, our products are free, and will always be. Check out what we offer below:</h2>
<div class="maincontainer">
<div class="thecard">
<div class="thefront"><h1 class="w3-display-middle2">Online Piano!</h1></div>
<div class="theback"><h1>Use our online piano, free of cost if you don't have one!</h1></div>
</div>
</div>
</body>
</html>
<script src="script.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
这不是完整的网站，因为没有图像。如果您认为有必要，请询问！感谢您的帮助！
答案 0 :(得分：3)
$保存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>