A beginner's jQuery quandary!

1

Hey, Campers, I’m trying to work out why the following script.js code isn’t working. Trying to get a nav bar to ‘stick’. I’m using Dreamweaver.

$(document).ready(function() {

$('.js--section-features').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');	
		} else {
			$('nav').removeClass('sticky');
		}
	
});

	/* 
	var waypoints = $('#handler-first').waypoint(function(direction) {
  notify(this.element.id + ' hit 25% from top of window') 
}, {
  offset: '25%'
})
		*/

});

Here’s my CSS

/* STICKY NAVI */

.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255,255,255,0.98);
box-shadow: 0 2px 2px #efefef;

}

.main-nav { margin-top: 18px; }

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
padding: 16px 0;
color: #555;

}

.sticky .logo { display: none }
.sticky .logo-black { display: block; }

And here’s my HTML

	<meta name="viewport" content="width=device-width", initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
		<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">  <link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
		<link rel="stylesheet" type="text/css" href="resources/css/style.css">
		<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
		<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
	<title>Omnifood</title>
	</head>

		<body>
		
		<header>
			<nav>
				<div class="row">

			<img src="resources/img/logo-white.png" alt="Omnifoood logo" class="logo">
			<img src="resources/img/logo.png" alt="Omnifoood logo" class="logo-black">
			<ul class="main-nav">
			<li><a href="#">Food delivery</a></li>
			<li><a href="#">How it works</a></li>
			<li><a href="#">Our cities</a></li>
			<li><a href="#">Sign up</a></li>
				
				</ul>
		</div>	
			
			
		</nav>
			<div class="hero-text-box">
				<h1>Goodbye, junk food.<br> Hello, super healthy meals.</h1>
				<a class="btn btn-full" href="#">I'm hungry</a>
				<a class="btn btn-ghost" href="#">Show me more</a>
			</div>
			
			
		</header>
		
		<section class="section-features js--section-features">
			<div class="row">
			<h2>Get food fast &mdash; not fast food</h2>
			<p class="long-copy">
	Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!</p>
														
			</div>
			
			<div class="row">
				<div class="col span-1-of-4 box">
				<i class="ion-ios-infinite-outline icon-big"></i>
				<h3>Up to 365 days/year</h3>
				<p>
		Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
				</p>
					
					
				</div>
				
				<div class="row">
				<div class="col span-1-of-4 box">
				<i class="ion-clock icon-big"></i>
				<h3>Ready in 20 minutes</h3>
				<p>
		You're only 20 minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
				</p>
					
					
				</div>
				
				<div class="row">
				<div class="col span-1-of-4 box">
				<i class="ion-ios-nutrition-outline icon-big"></i>
				<h3>100% organic</h3>
				<p>
		All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
				</p>
					
		</div>
				
				<div class="row">
				<div class="col span-1-of-4 box">
				<i class="ion-ios-cart-outline icon-big"></i>
				<h3>Order anything</h3>
				<p>
		We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
				</p>
					
					</div>
				
				</div>
				
			
			
		</section>
		<section class="section-meals">
		<ul class="meals-showcase clearfix">
				<li>
			
			<figure class="meal-photo">
				<img src="resources/img/1.jpg" alt=Korean bibimbap with egg and vegetables>
				
				</figure>
		</li>
		
		<li>
			
			<figure class="meal-photo">
				<img src="resources/img/2.jpg" alt=Simple italian pizza with cherry tomatoes>
				
		</figure>
		</li>
		
		<li>
			<figure class="meal-photo">
				<img src="resources/img/3.jpg" alt=Chicken breast steak with vegetables>
				</figure>
			</li>
		<li>
			
			<figure class="meal-photo">
				<img src="resources/img/4.jpg" alt=Autumn pumpkin soup>
				</figure>
		</li>
		
		</ul>
			<ul class="meals-showcase clearfix">
			<li>
			<figure class="meal-photo">
				<img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
				</figure>
		</li>
		
		<li>
			
			<figure class="meal-photo">
				<img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
				</figure>
		</li>
		<li>
			
			<figure class="meal-photo">
				<img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
				
				</figure>
		</li>
		
		<li>
			
			<figure class="meal-photo">
				<img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
				
				</figure>
		</li>
		
		</ul>
							
			
		</section>
		
		<section class="section-steps">
			<div class="row">
				<h2>How it works &mdash; Simple as 1, 2, 3</h2>
					</div>
					<div class="row">
					<div class="col span-1-of-2 steps-box">
						<img src="resources/img/app-iPhone.png" alt="Omnifood app on iPhone" class="app-screen">
						</div>
					<div class="col span-1-of-2 steps-box">
						<div class="works-step">
							<div>1</div>
							<p>Choose the subscription plan that best fits your needs and sign up today.</p>
								</div>
								<div class="works-step">
							<div>2</div>
							<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
								</div>
							<div class="works-step">
							<div>3</div>	
							<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
								</div>
								
								<a href="#" class="btn-app"><img src="resources/img/download-app.svg" alt="App Store Button"></a>
								<a href="#" class="btn-app"><img src="resources/img/download-app-android.png" alt="Play Store Button"></a> 
						</div>
				</div>
			
		</section>
		
		
		<section class="section-cities">
		<div class="row">
				<h2>We're currently in these cities</h2>
					</div>
			<div class="row">
				<div class="col span-1-of-4 box">
				<img src="resources/img/lisbon-3.jpg" alt="Lisbon">
				<h3>Lisbon</h3>
					<div class="city-feature">
					<i class="ion-ios-person icon-small"></i>
					1600+ happy eaters
					</div>
					<div class="city-feature">
					<i class="ion-ios-star-outline icon-small"></i>
					60+ top chefs
							</div>
							<div class="city-feature">
							<i class="ion-social-twitter-outline icon-small"></i>
							<a href="#">@omnifood_lx</a>
					</div>
					
					</div>
				
				<div class="col span-1-of-4 box">
				<img src="resources/img/san-francisco.jpg" alt="SanFrancisco">
				<h3>San Francisco</h3>
					<div class="city-feature">
						<i class="ion-ios-person icon-small"></i>
						3700+ happy eaters
						</div>
						<div class="city-feature">
						<i class="ion-ios-star-outline icon-small"></i>
							160+ top chefs
							</div>
							<div class="city-feature">
							<i class="ion-social-twitter-outline icon-small"></i>
							<a href="#">@omnifood_lx</a>
					
				</div>
					
				</div>
				
				<div class="col span-1-of-4 box">
				<img src="resources/img/berlin.jpg" alt="Berlin">
				<h3>Berlin</h3>
					<div class="city-feature">
						<i class="ion-ios-person icon-small"></i>
						2300+ happy eaters
						</div>
						<div class="city-feature">
						<i class="ion-ios-star-outline icon-small"></i>
							110+ top chefs
							</div>
							<div class="city-feature">
							<i class="ion-social-twitter-outline icon-small"></i>
							<a href="#">@omnifood_berlin</a>
					</div>
					</div>
				
				<div class="col span-1-of-4 box">
				<img src="resources/img/london.jpg" alt="London">
				<h3>London</h3>
					<div class="city-feature">
						<i class="ion-ios-person icon-small"></i>
						1200+ happy eaters
						</div>
						<div class="city-feature">
						<i class="ion-ios-star-outline icon-small"></i>
							50+ top chefs
							</div>
							<div class="city-feature">
							<i class="ion-social-twitter-outline icon-small"></i>
							<a href="#">@omnifood_london</a>
											
				</div>
					
				</div>
				
			</div>				
			
		</section>
		
		<section class="section-testimonials">
				 <div class="row">
					<h2>Our customers can't live without us</h2>
				</div>
					<div class="row">
					<div class="col span-1-of-3">
						<blockquote>
							Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!

<img src=“resources/img/customer-1.jpg” alt:“customer 1”>Albert Duncan




Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
<img src=“resources/img/customer-2.jpg” alt:“customer 2”>Joana Silva




I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
<img src=“resources/img/customer-3.jpg” alt:“customer 3”>Milton Chapman

						</div>
						
						
					</div>
		
			</section>
		
		<section class="section-plans">
			<div class="row">
					<h2>Start eating healthily today</h2>
				</div>
				<div class="row">
					<div class="col span-1-of-3">
						<div class="plan-box">
				<div>
					<h3>Premium</h3>
								<p class="plan-price">$399 <span>/ month</span></p>
								<p class="plan-price-meal">That's only 13.30 per meal</p>
					</div>
				<div>
					<ul>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
					</ul>
				</div>
					<div>
					<a href="a" class="btn btn-full">Sign up now</a>
						
				</div>
			</div>
		</div>
					
					<div class="col span-1-of-3">
						<div class="plan-box">
				<div>
						<h3>Pro</h3>
								<p class="plan-price">$149 <span>/ month</span></p>
								<p class="plan-price-meal">That's only $14.90 per meal</p>
					</div>
				<div>
					<ul>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal 10 days/month</li>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
					</ul>
				</div>
					<div><a href="a" class="btn btn-ghost">Sign up now</a>
						
				</div>
			</div>
					
			
		</div>
		
		<div class="col span-1-of-3">
						<div class="plan-box">
				
				<div>

								<h3>Starter</h3>
								<p class="plan-price">$19 <span>/ meal</span></p>
								<p class="plan-price-meal">&nbsp;</p>
					</div>
				<div>
					<ul>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 pm</li>
					<li><i class="ion-ios-close-empty icon-small"></i></li>
					<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
					</ul>
				</div>
					<div><a href="a" class="btn btn-ghost">Sign up now</a>
						
				</div>
			</div>
					
			
		</div>
			
			</div>
			
							
		</section>
		
		<section class="section-form">
			<div class="row">
				<h2>We're happy to hear from you</h2>
				<div class="row">
					<form method="post" action="#" class="contact-form">
						<div class="row">
							<div class="col span-1-of-3">
								<label for="name">Name</label>
							</div>
							<div class="col span-2-of-3">
								<input type="text" name="name" id="name" placeholder="Your name" required>
								
						</div>
						</div>
						
						<div class="row">
							<div class="col span-1-of-3">
								<label for="email">Email</label>
								
						</div>
							<div class="col span-2-of-3">
								<input type="email" name="email" id="email" placeholder="Email address" required>
								
							</div>
						</div>
						
						<div class="row">
							<div class="col span-1-of-3">
								<label for="find-us">How did you find us?</label>
								
						</div>
							<div class="col span-2-of-3">
								<select name="find-us" id="find-us">
								<option value="friends">Friends</option>
								<option value="search">Search engine</option>
								<option value="ad">Advertisement</option>
								<option value="other">Other</option>					
								</select>
							</div>
						</div>
							<div class="row">
							<div class="col span-1-of-3">
								<label>Newsletter?</label>
							</div>
							<div class="col span-2-of-3">
								<input type="checkbox" name="newsletter" id="newsletter" checked>Yes, please
								
						</div>
						</div>
						<div class="row">
							<div class="col span-1-of-3">
								<label>Drop us a line</label>
							</div>
							<div class="col span-2-of-3">
								<textarea name="message" placeholder="Your message"></textarea>
						</div>
						</div>
						<div class="row">
							<div class="col span-1-of-3">
								<label>&nbsp;</label>
					</div>
							<div class="col span-2-of-3">
								<input type="submit" value="Send it!">
								
						</div>
						</div>
						
						
					</form>
					
				</div>
			
		</section>
		
		<footer>
			<div class="row">
				<div class="col span-1-of-2">
					<ul class="footer-nav">
						<li><a href="#">About us</a></li>
						<li><a href="#">Blog</a></li>
						<li><a href="#">Press</a></li>
						<li><a href="#">iOS App</a></li>
						<li><a href="#">Android App</a></li>
						
						</ul>
				 </div>	
				<div class="col span-1-of-2">
					<ul class="social-links">
						<li><a href="#"><i class="ion-social-facebook"></i></a></li>
						<li><a href="#"><i class="ion-social-twitter"></i></a></li>
						<li><a href="#"><i class="ion-social-googleplus"></i></a></li>
						<li><a href="#"><i class="ion-social-instagram"></i></a></li>
				</ul>		
		</div>		
	</div>
				<div class="row">
					<p>Copyright &copy; 2018 by Omnifood. All rights reserved.
					</p>
					
					</div>
				</footer>	
					
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>	
	<script src="//cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
	<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//cdn.jsdelivr.net/selectivizr/1.0.3b/selectivizr.min.js"></script>
	<script src="vendors/js/jquery.waypoints.min.js"></script>
	<script src="resources/js/script.js"></script>		
											  
							
									
		</body>
	
	
	
	
	
	</html>
2

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://freecodecamp.org.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile: