Javascript中令人沮丧的错误
Javascript中令人沮丧的错误
提问于 2018-06-23 03:25:43
我的Jquery在StackOverflow上的小提琴和代码片段等文本编辑器中运行得很好，但一旦我把它放在括号里，甚至在Github上打开它，导航栏向下滚动的动画就不起作用了。Here是一个指向小提琴的链接，我在其中使用了与括号和Github Pages.中使用的完全相同的代码(我只是使用了一个随机的背景图像)。
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 10) {
$('#nav').addClass('shrink');
} else {
$('#nav').removeClass('shrink');
}
});
});/**********BODY GENERAL**********/
body {
margin: 0;
height: 2500px;
/* just to demonstrate how it will looks with content */
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* Fix this one day */
.bg-img {
background: url('https://orig00.deviantart.net/2106/f/2012/329/0/e/untitled_drawing_by_walktheinch-d5m49xe.png') no-repeat center center;
background-size: cover;
height: 100vh;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
@media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
/************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: transparent;
*/ z-index: 100;
transition: all ease .5s;
height: 70px;
position: relative;
}
/*============= NEW CSS RULES ============*/
#nav {
position: relative;
}
#nav .logo p {
margin: 10px 0;
}
#nav .background {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #ededed;
height: 0;
transition: height 800ms ease;
}
#nav.shrink .background {
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<!-- Linking Jquery/Javascript -->
</head>
<body>
<div class="bg-img">
<header>
<div id="nav">
<!---- NEW BACKGROUND ELEMENT HERE ---->
<div class="background"></div>
<nav class="container">
<div class="menu1">
<a id="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a id="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a id="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a id="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
</div>
</header>
<div class="Minfo">
<div class="subtitle">
CENTENNIAL<br>
<div class="title">
It's Academic
</div>
<br>
<div class="subtext">
Meets every Tuesday in Room 506
</div>
</div>
</div>
</div>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-23 04:12:10
这是一个公关：https://github.com/killerchef732/ItsAcademic/pull/2
基本上，您没有在页面中包含脚本标记(<script src="script.js"></script>)，并且在script.js文件的末尾也有一些垃圾代码(÷ ,)。
首先，我注意到您的页面中甚至没有脚本代码。然后一旦我把它添加进去，chrome开发者控制台就会告诉我它遇到了错误。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50994466
复制相关文章
相似问题