Essentially, when the navigation bar (or any other element) reaches the top of the page or window, a class called "sticky" is added to the element and CSS styles it as fixed. This functionality acts like an IF statement - if the element is far from the top, the class is removed and the element returns to its normal state.
I have thoroughly checked and tested all the code. In Chrome Developer tools, I can see that jQuery is properly adding and removing the class at the correct times, but the CSS styling doesn't seem to take effect.
$(document).ready(function() {
var stickyNavTop = $('nav').offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});* {
margin: 0;
padding: 0;
font-family: "Helvetice Neue", sans-serif;
}
@font-face {
font-family: "Helvetica Neue";
src: url("../fonts/HelveticaNeue.otf");
}
html, body {
width: 100%;
height: 100%;
}
div#container {
width: 100%;
height: 100%;
}
div#content {
width: 100%;
height: 100%;
}
section#main-bg {
width: 100%;
height: 100%;
}
#main-bg img {
width: 100%;
height: 100%;
position: fixed;
z-index: -9999; /* always on bottom */
}
nav {
width: 100%;
height: 60px;
bottom: -60px;
background-color: #333333;
}
/* nav */ .sticky {
position: fixed;
}
nav ul {
float: right;
}
nav ul li {
float: left;
margin-left: 40px;
list-style: none;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 20px;
line-height: 60px;
}
div#content {
width: 100%;
height: 2000px;
background-color: #dedede;
bottom: 0;
}<!DOCTYPE html>
<html>
<head>
<title>Josh Murray | My Personal Page</title>
<meta name="viewport" content="width=device-width, height=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main_styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="scripts/homemadeSticky.js"></script>
</head>
<body>
<div id="container">
<section role="banner" id="main-bg">
<!-- this is where the full screen image will be -->
<img src="img/bg.jpg">
</section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="content">
<!-- content in here -->
</div>
</div>
</body>
</html>Your assistance is greatly appreciated. Thank you.