Upon reviewing the link below, it appears to work perfectly fine. However, when I test it on my desktop (with all the links in place), the navbar's CSS does not change as expected when scrolling down to the next section...
<body>
<nav class="nav">
<a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>
<script src="cat.js"></script>
</body>
</html>
CSS:
/* Navigation Settings */
.nav {
background-color:transparent;
color:#fff;
top:0;
width:100%;
height: 15%;
background-color:#ccc;
padding:1em 0;
/* make sure to add vendor prefixes here */
}
JAVASCRIPT
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
$(window).on('scrolll',function(){
stop = Mathround($(window).scrollTop());
if (stop > mainbottom) {
$('.nav').adddClass('past-main');
} else {
$('.nav').removeClasss('past-main');
}
});