Uncaught ReferenceError: $ is not defined (For the Scrollspy effect)
Uncaught ReferenceError: $ is not defined (For the Scrollspy effect)
正在尝试让我的 scrollspy 工作。我将代码从 https://codepen.io/emiemi/pen/jAkvxV 复制到我的原子文本编辑器到我的桌面,现在导航菜单不起作用但鼠标滚动有效。
我该如何解决这个问题?即使 运行 代码片段有效,但当我尝试时它不起作用从我的桌面打开它。 这是我的桌面在 Chrome 开发模式下的错误。 (见下文)
//MENU SCROLL
$(".menu a").click(function() {
//on click, we get the target value of the selected element
var target = $(this).attr('target');
//we then scroll our body until the top of the corresponding div in 700ms
var mh = $('.menu').height();
$('body').animate({
scrollTop: $("#" + target).offset().top - mh
}, 700);
});
//SCROLLSPY
function scrollSpy() {
var mh = $('.menu').height();
$('#landing').css("padding-top", mh + "px");
$(".menu a").removeClass("active"); //we remove active from every menu element
//we get the divs offsets looping the menu links and getting the targets (this is dynamic: when we change div #suzy's height, code won't break!)
var divs = [];
$(".menu a").each(function(i) {
var appo = $(this).attr("target");
//here we get the distance from top of each div
divs[i] = $("#" + appo).offset().top;
});
//gets actual scroll and adds window height/2 to change the active menu voice when the lower div reaches half of screen (it can be changed)
var pos = $(window).scrollTop();
var off = ($(window).height()) / 2;
pos = pos + off;
//we parse our "div distances from top" object (divs) until we find a div which is further from top than the actual scroll position(+ of course window height/2). When we find it, we assign "active" class to the Nth menu voice which is corresponding to the last div closer to the top than the actual scroll -> trick is looping from index=0 while Nth css numeration starts from 1, so when the index=3 (fourth div) breaks our cycly, we give active to the third element in menu.
var index = 0;
for (index = 0; index < divs.length; index++) {
if (pos < divs[index]) {
break;
}
}
index--;
$(".menu li:eq(" + index + ") a").addClass("active");
};
$(window).scroll(function() {
scrollSpy();
});
$(document).ready(function() {
scrollSpy();
});
//suzy div height click
$('#expander').click(function() {
$("#suzy").toggleClass('aug');
});
/*JUST STYLE....*/
/*MENU*/
.menu {
font-family: Raleway;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
background: #53346D;
transition: all .3s;
text-align: center;
}
.menu ul {
padding: 0;
list-style-type: none;
display: inline-block;
margin: 0;
}
.menu ul li {
display: inline-block;
font-size: 1.1em;
}
.menu ul li a {
display: block;
padding: 20px 20px;
color: #fdfdfd;
text-transform: uppercase;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all.3s;
}
.menu ul li a:hover,
.menu ul li a.active {
text-decoration: none;
}
.menu ul li a:focus {
outline: 0!important;
text-decoration: none;
}
.menu ul li a.active {
border-color: #fafafa;
}
/*DIVS*/
.main {
padding-top: 45px;
text-align: center;
}
h1 {
color: #fafafa;
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%);
font-family: Galada;
font-weight: 400;
font-size: 3em;
}
.main div {
position: relative
}
#landing {
min-height: 100vh;
background: #00d2ff;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #00d2ff, #928DAB);
background: linear-gradient(to left, #00d2ff, #928DAB);
}
#suzy {
min-height: 120vh;
background: #B24592;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #B24592, #F15F79);
background: linear-gradient(to left, #B24592, #F15F79);
transition: all.5s;
}
#suzy.aug {
min-height: 240vh;
}
#night {
min-height: 180vh;
background: #2c3e50;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #2c3e50, #3498db);
background: linear-gradient(to left, #2c3e50, #3498db);
}
#park {
min-height: 150vh;
background: #AAFFA9;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #AAFFA9, #11FFBD);
background: linear-gradient(to left, #AAFFA9, #11FFBD);
}
#expander {
background: #fafafa;
padding: 20x;
cursor: pointer;
position: relative;
display: inline-block;
margin-top: 30px;
}
#expander h2 {
color: #B24592;
font-family: Raleway;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cannon</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- ____________________________________________ Nav Bar ____________________________________________ -->
<div class="menu">
<ul>
<li><a target="landing">landing</a></li>
<li><a target="suzy">suzy</a></li>
<li><a target="night">night</a></li>
<li><a target="park">park</a></li>
</ul>
</div>
<!-- ____________________________________________ End of nav bar ____________________________________________ -->
<div class="main">
<div id="landing">
<h1>This is your first div</h1>
</div>
<div id="suzy">
<h1>This is your second div</h1>
</div>
<div id="night">
<h1>This is the third div</h1>
</div>
<div id="park">
<h1>And this is the last div</h1>
</div>
</div>
</body>
</html>
脚本顺序错误,您必须先包含 jQuery,因为您的脚本使用 jQuery.
改变这个:
<script type="text/javascript" src="javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
对此:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
正在尝试让我的 scrollspy 工作。我将代码从 https://codepen.io/emiemi/pen/jAkvxV 复制到我的原子文本编辑器到我的桌面,现在导航菜单不起作用但鼠标滚动有效。
我该如何解决这个问题?即使 运行 代码片段有效,但当我尝试时它不起作用从我的桌面打开它。 这是我的桌面在 Chrome 开发模式下的错误。 (见下文)
//MENU SCROLL
$(".menu a").click(function() {
//on click, we get the target value of the selected element
var target = $(this).attr('target');
//we then scroll our body until the top of the corresponding div in 700ms
var mh = $('.menu').height();
$('body').animate({
scrollTop: $("#" + target).offset().top - mh
}, 700);
});
//SCROLLSPY
function scrollSpy() {
var mh = $('.menu').height();
$('#landing').css("padding-top", mh + "px");
$(".menu a").removeClass("active"); //we remove active from every menu element
//we get the divs offsets looping the menu links and getting the targets (this is dynamic: when we change div #suzy's height, code won't break!)
var divs = [];
$(".menu a").each(function(i) {
var appo = $(this).attr("target");
//here we get the distance from top of each div
divs[i] = $("#" + appo).offset().top;
});
//gets actual scroll and adds window height/2 to change the active menu voice when the lower div reaches half of screen (it can be changed)
var pos = $(window).scrollTop();
var off = ($(window).height()) / 2;
pos = pos + off;
//we parse our "div distances from top" object (divs) until we find a div which is further from top than the actual scroll position(+ of course window height/2). When we find it, we assign "active" class to the Nth menu voice which is corresponding to the last div closer to the top than the actual scroll -> trick is looping from index=0 while Nth css numeration starts from 1, so when the index=3 (fourth div) breaks our cycly, we give active to the third element in menu.
var index = 0;
for (index = 0; index < divs.length; index++) {
if (pos < divs[index]) {
break;
}
}
index--;
$(".menu li:eq(" + index + ") a").addClass("active");
};
$(window).scroll(function() {
scrollSpy();
});
$(document).ready(function() {
scrollSpy();
});
//suzy div height click
$('#expander').click(function() {
$("#suzy").toggleClass('aug');
});
/*JUST STYLE....*/
/*MENU*/
.menu {
font-family: Raleway;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
background: #53346D;
transition: all .3s;
text-align: center;
}
.menu ul {
padding: 0;
list-style-type: none;
display: inline-block;
margin: 0;
}
.menu ul li {
display: inline-block;
font-size: 1.1em;
}
.menu ul li a {
display: block;
padding: 20px 20px;
color: #fdfdfd;
text-transform: uppercase;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all.3s;
}
.menu ul li a:hover,
.menu ul li a.active {
text-decoration: none;
}
.menu ul li a:focus {
outline: 0!important;
text-decoration: none;
}
.menu ul li a.active {
border-color: #fafafa;
}
/*DIVS*/
.main {
padding-top: 45px;
text-align: center;
}
h1 {
color: #fafafa;
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%);
font-family: Galada;
font-weight: 400;
font-size: 3em;
}
.main div {
position: relative
}
#landing {
min-height: 100vh;
background: #00d2ff;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #00d2ff, #928DAB);
background: linear-gradient(to left, #00d2ff, #928DAB);
}
#suzy {
min-height: 120vh;
background: #B24592;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #B24592, #F15F79);
background: linear-gradient(to left, #B24592, #F15F79);
transition: all.5s;
}
#suzy.aug {
min-height: 240vh;
}
#night {
min-height: 180vh;
background: #2c3e50;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #2c3e50, #3498db);
background: linear-gradient(to left, #2c3e50, #3498db);
}
#park {
min-height: 150vh;
background: #AAFFA9;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #AAFFA9, #11FFBD);
background: linear-gradient(to left, #AAFFA9, #11FFBD);
}
#expander {
background: #fafafa;
padding: 20x;
cursor: pointer;
position: relative;
display: inline-block;
margin-top: 30px;
}
#expander h2 {
color: #B24592;
font-family: Raleway;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cannon</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- ____________________________________________ Nav Bar ____________________________________________ -->
<div class="menu">
<ul>
<li><a target="landing">landing</a></li>
<li><a target="suzy">suzy</a></li>
<li><a target="night">night</a></li>
<li><a target="park">park</a></li>
</ul>
</div>
<!-- ____________________________________________ End of nav bar ____________________________________________ -->
<div class="main">
<div id="landing">
<h1>This is your first div</h1>
</div>
<div id="suzy">
<h1>This is your second div</h1>
</div>
<div id="night">
<h1>This is the third div</h1>
</div>
<div id="park">
<h1>And this is the last div</h1>
</div>
</div>
</body>
</html>
脚本顺序错误,您必须先包含 jQuery,因为您的脚本使用 jQuery.
改变这个:
<script type="text/javascript" src="javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
对此:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>