我正在我的个人网站上工作，但我无法让导航正常工作。这个想法是当您使用 jQuery 函数 scrollTop 和 addClass 向下滚动一点时让导航栏下降。我已经让它在这个 CodePen 中工作:http://codepen.io/anon/pen/smoGp但是当我将它翻译到我的网站时，出现了问题。我找不到故障。任何帮助将非常感激!这是我网站的链接:http://lindseybakermedia.com/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lindsey Baker Media</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" />
</head>
<body>
<header>
<nav class="mainNav">
<a href="#" id="logoLink"><img src="images/logo.svg" alt="Lindsey Baker Media Logo"></a>
<ul>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear"></div>
</nav>
<section id="intro">
<img src="images/top.svg" id="introTop" alt="Lindsey Baker Background Top">
<h1>Hello, my name is <span class="introName">Lindsey Baker.</span><br>
I am a <span class="introProfession">web designer</span> & <span class="introProfession">graphic artist.</span></h1>
<img src="images/bottom.svg" id="introBottom" alt="Lindsey Baker Background Bottom">
</section>
</header>
<main>
<section id="gallery">
<h2><span class="introName">Design</span> Work</h2>
<ul class="grid">
<li>
<figure>
<img src="images/thumbs/inkThumb.png" alt="Lindsey Baker: Got Ink?">
<figcaption>
<h3>Got Ink?</h3>
<span>Digital Illustration</span>
<a href="#">View Work</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/thumbs/gitThumb.png" alt="Lindsey Baker: ASU Microsite">
<figcaption>
<h3>ASU Microsite</h3>
<span>Web Design</span>
<a href="#">View Work</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/thumbs/disconnectThumb.png" alt="Lindsey Baker: Disconnect">
<figcaption>
<h3>Disconnect</h3>
<span>Photo Manipulation</span>
<a href="#">View Work</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/thumbs/napoleonThumb.png" alt="Lindsey Baker: Napoleon">
<figcaption>
<h3>Napoleon</h3>
<span>Browser Extension</span>
<a href="#">View Work</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/thumbs/rogueThumb.png" alt="Lindsey Baker: Rogue">
<figcaption>
<h3>Rogue</h3>
<span>Print Design, Branding</span>
<a href="">View Work</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/thumbs/backpackingThumb.png" alt="Lindsey Baker: Backpacking & Adventures">
<figcaption>
<h3>Backpacking & Adventures</h3>
<span>Web Design, Branding</span>
<a href="">View Work</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/thumbs/bloodhoundThumb.png" alt="Lindsey Baker: Bloodhound">
<figcaption>
<h3>Bloodbound</h3>
<span>Mobile Application</span>
<a href="#">View Work</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/thumbs/tasteThumb.png" alt="Lindsey Baker: Taste & Treat">
<figcaption>
<h3>Taste & Treat</h3>
<span>Web Design, Branding</span>
<a href="#">View Work</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/thumbs/jajoThumb.png" alt="Lindsey Baker: Jajo">
<figcaption>
<h3>Jajo</h3>
<span>Web Application</span>
<a href="">View Work</a>
</figcaption>
</figure>
</li>
</ul>
</section>
<section id="about">
<article>
<h2>More about <span class="introName">Lindsey</span></h2>
<img src="images/lindsey.png" alt="Lindsey Baker">
<div id="aboutPara">
<p>Lindsey Baker is currently a senior in the Graphic Information Techonology program at Arizona State University where she specializes in web development. She began freelance designing in 2012 and has begun working nationally with clients in Chicago and Denver. Recently, she co-founded a startup tech company where she has not only expanded her skills to UI/UX design, but has taken an interest in the entrepreneurial side of next curve technology. While the majority of Lindsey's professional experience lies in web development, her compelling, polished aesthetic has gained recognition through numberous art shows and publications. She is currently located in Scottsdale, Arizona where she will further her education and obtain her MS Tech in Technology through Arizona State University. In her spare time, Lindsey attends technology related events and is continuously bettering herself as a web and graphic designer.</p>
<p><a href="#">Resume</a> / <a href="#">Contact</a></p>
</div>
<div class="clear"></div>
</article>
</section>
<section id="contact">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
</div>
</form>
</div>
<ul>
<li id="gmail"><a href="mailto:lindseybakermedia@gmail.com">lindseybakermedia@gmail.com</a></li>
<li id="phone"><a href="tel:4802854357">480.285.4357</a></li>
<li id="facebook"><a href="https://www.facebook.com/lbakermedia">Facebook</a></li>
<li id="twitter"><a href="https://twitter.com/lbakermedia">Twitter</a></li>
<li id="linkedin"><a href="#">LinkedIn</a></li>
<li id="instagram"><a href="#">Instagram</a></li>
</ul>
<div class="clear"></div>
</section>
</main>
<footer>
<p id="copyright">Copyright © 2014 Lindsey Baker</p>
<a href="http://www.lindseybakermedia.com">lindseybakermedia.com</a>
<div class="clear"></div>
</footer>
<script type="text/javascript" src="js/fontsmoothie.min.js" async></script>
<script type="text/javascript" src="js/navigation.js" async></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</body>
</html>
CSS:
/***** GEOGROTESQUE *****/
@import url("Geogrotesque-Thin.css");
@import url("Geogrotesque-UltraLight.css");
@import url("Geogrotesque-Light.css");
@import url("Geogrotesque-Regular.css");
@import url("Geogrotesque-Medium.css");
@import url("Geogrotesque-SemiBold.css");
@import url("Geogrotesque-Bold.css");
/***** ALL *****/
* {
margin: 0;
padding: 0; }
.clear {
clear: both;
height: 0; }
body {
font-family: museo300, georgia;
font-size: 16px;
line-height: 28px;
color: #222222;
background-color: #fbfbfb; }
/***** INTRO *****/
section#intro {
background-color: #37C697;
height: 100vh;
min-height: 500px;
position: relative; }
section#intro h1 {
color: #ffffff;
font-family: Geogrotesque-Thin;
padding-top: 35vh;
padding-left: 6.5%;
padding-right: 6.5%;
font-size: 65px;
line-height: 75px; }
section#intro h1 .introProfession {
font-family: Geogrotesque-Regular; }
section#intro img#introTop {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: auto; }
section#intro img#introBottom {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: auto; }
.introName {
font-family: Geogrotesque-SemiBold; }
/***** NAV *****/
header nav.mainNav {
padding: 10px 6.5%;
position: fixed;
top: -100px;
z-index: 999;
width: 87%;
background-color: #ffffff;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0; }
header nav.mainNav ul {
list-style: none;
float: right;
width: 50%;
text-align: right;
display: table;
vertical-align: middle; }
header nav.mainNav ul li {
display: inline-block;
padding-left: 5%;
padding-top: 40px;
font-family: Geogrotesque-Light;
text-transform: uppercase;
font-size: 22px; }
header nav.mainNav ul li a:link, header nav.mainNav ul li a:visited {
text-decoration: none;
color: #222222;
transition: all 0.3s ease-in-out 0s; }
header nav.mainNav ul li a:hover, header nav.mainNav ul li a:active {
color: #37C697; }
header nav.mainNav a#logoLink img {
width: 60px;
height: auto;
float: left; }
header nav.sticky {
opacity: 1;
top: 0px; }
/***** GALLERY *****/
section#gallery {
width: 100%; }
section#gallery h2 {
margin: 140px auto 0px;
font-family: Geogrotesque-UltraLight;
text-transform: uppercase;
font-size: 35px;
text-align: left;
padding-bottom: 7px;
border-bottom: 3px solid #37C697;
border-radius: 1px;
letter-spacing: -1px;
width: 87%; }
.grid {
padding: 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center; }
.grid li {
display: inline-block;
width: 27%;
margin: 0;
padding: 2%;
text-align: left;
position: relative; }
.grid figure {
margin: 0;
position: relative;
overflow: hidden;
padding: 5px;
border: 1px solid #cccccc;
transition: all 0.3s ease-in-out 0s;
background-color: #ffffff; }
.grid figure img {
max-width: 100%;
display: block;
position: relative;
transition: transform 0.4s; }
.grid figure:hover {
border: 1px solid #222222; }
.grid figure:hover img {
transform: translateY(-50px); }
.grid figure:hover figcaption {
opacity: 1;
transform: translateY(0px);
transition: transform 0.4s, opacity 0.1s; }
.grid figcaption {
position: absolute;
top: auto;
bottom: 0;
left: 0;
padding: 20px;
background-color: #222222;
color: #37C697;
height: 60px;
width: 100%;
opacity: 0;
transform: translateY(100%);
transition: transform 0.4s, opacity 0.1s 0.3s; }
.grid figcaption h3 {
margin: 0;
padding: 0;
color: #ffffff; }
.grid figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
color: #ffffff;
position: absolute;
bottom: 20px;
right: 60px; }
.grid figcaption a:link, .grid figcaption a:visited {
transition: all 0.3s ease-in-out 0s;
background-color: #37C697;
text-decoration: none; }
.grid figcaption a:hover, .grid figcaption a:active {
background-color: #2B9975; }
/***** ABOUT *****/
section#about {
width: 87%;
margin: 100px auto; }
section#about a:link, section#about a:visited {
color: #ffffff;
background-color: #37C697;
text-decoration: none;
padding: 5px 10px;
border-radius: 2px;
transition: all 0.3s ease-in-out 0s; }
section#about a:hover, section#about a:active {
background-color: #2B9975; }
section#about h2 {
margin-bottom: 15px;
font-family: Geogrotesque-UltraLight;
text-transform: uppercase;
font-size: 35px;
text-align: right;
padding-bottom: 7px;
border-bottom: 3px solid #37C697;
border-radius: 1px;
margin-bottom: 40px;
letter-spacing: -1px; }
section#about img {
float: left;
width: 29.2%;
height: auto;
margin-right: 4.7%;
padding: 5px;
border: 1px solid #cccccc; }
section#about #aboutPara {
width: 64.5%;
float: right; }
section#about #aboutPara p {
margin-bottom: 25px;
text-align: justify; }
/***** CONTACT *****/
section#contact {
background-color: #37C697;
padding: 0 6.5%; }
section#contact a:link, section#contact a:visited {
color: #ffffff;
text-decoration: none;
background: none; }
section#contact a:hover, section#contact a:active {
text-decoration: underline; }
#form-div {
float: right;
width: 30%;
margin: 50px 0; }
.feedback-input {
color: #3c3c3c;
font-family: museo300, georgia;
font-size: 16px;
border-radius: 2px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid transparent; }
.feedback-input:focus {
background: #fff;
box-shadow: 0;
border: 3px solid #2B9975;
color: #2B9975;
outline: none;
padding: 13px 13px 13px 54px; }
.focused {
color: #30aed6;
border: #30aed6 solid 3px; }
/* Icons ---------------------------------- */
#name {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
border-radius: 2px; }
#name:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat; }
#email {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
border-radius: 2px; }
#email:focus {
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat; }
#comment {
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
border-radius: 2px; }
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize: vertical; }
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color: white; }
#button-blue {
font-family: Geogrotesque-SemiBold;
float: left;
width: 100%;
border: none;
cursor: pointer;
background-color: #2B9975;
color: white;
font-size: 20px;
padding: 10px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top: -4px;
border-radius: 2px; }
#button-blue:hover {
background-color: #222222; }
.submit:hover {
color: #2B9975; }
@media only screen and (max-width: 580px) {
#form-div {
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%; } }
/***** FOOTER *****/
footer {
background-color: #222222;
color: #ffffff;
padding: 3px 6.5%; }
footer a:link, footer a:visited {
color: #ffffff;
text-decoration: none;
background: none; }
footer a:hover, footer a:active {
text-decoration: underline; }
footer p#copyright {
float: left; }
footer a {
float: right; }
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.mainNav').addClass('sticky');
} else {
$('.mainNav').removeClass('sticky');
}
});
最佳答案
在 HTML 中包含 javascript 文件的顺序很重要。在您的 HTML 中，移动这些行 (jQuery):
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
在这些行之上:
<script type="text/javascript" src="js/fontsmoothie.min.js" async></script>
<script type="text/javascript" src="js/navigation.js" async></script>
关于使用 scollTop 的 jQuery 导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26662835/