After successfully resolving an issue on Codepen, I encountered a problem when transferring the JavaScript/JQuery code to my website. It seems that none of the JavaScript functionalities are working properly. Here is the link to the functional Codepen: http://codepen.io/anon/pen/aOXMLR
Below is the code snippet:
HTML:
<html>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="function.js"></script>
<script type="text/javascript" src="jquery.waypoints.min.js"></script>
</script>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900' rel='stylesheet' type='text/css'>
<head>
<title>Joseph Cooper</title>
</head>
<body>
<header id="home">
<nav id="nav-wrap">
<ul id="nav" class="nav">
<li class="current"><a class="page" href="#home">Home</a></li>
<li><a class="page" href="#about">About</a></li>
<li><a class="page" href="#portfolio">Portfolio</a></li>
<li><a class="page" href="#scrapbook">Scrapbook</a></li>
<li><a class="page" href="#contact">Contact</a></li>
</ul>
</nav>
<div class="header-content">
<img id="logo" src="img/logo.png" alt="logo" height="200px" width="200px">
<h3>Joseph Cooper</h3>
<h3>Graphic Designer</h3>
<p> 10.03.97 </p>
</div>
<a href="#about"><img id ="down" src="img/down.png" height="42px" width="42px"></a>
</header>
<section id="about">
<h3> About Me </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam esse eum nam nobis nulla placeat quaerat quia sequi velit. A aut delectus, eos excepturi harum itaque maxime natus voluptatem.</p>
</section>
<section id="portfolio">
<h3>Portfolio </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam esse eum nam nobis nulla placeat quaerat quia sequi velit. A aut delectus, eos excepturi harum itaque maxime natus voluptatem.</p>
</section>
<section id="scrapbook">
<h3>Portfolio </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam esse eum nam nobis nulla placeat quaerat quia sequi velit. A aut delectus, eos excepturi harum itaque maxime natus voluptatem.</p>
</section>
<section id="contact">
<h3>Portfolio </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam esse eum nam nobis nulla placeat quaerat quia sequi velit. A aut delectus, eos excepturi harum itaque maxime natus voluptatem.</p>
</section>
</body>
</html>
CSS:
// when we scroll down the window, do this:
$(window).scroll(function(){
//Getting the scroll percentage
var windowHeight = $(window).height();
var scrollHeight = $(window).scrollTop();
var scrollPercentage = (scrollHeight / windowHeight);
console.log(scrollPercentage);
// if we have scrolled past 200, add the alternate class to nav bar
if(scrollPercentage > 1) {
$('.nav').addClass('scrolling');
} else {
$('.nav').removeClass('scrolling');
}
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 80
}, 1000);
return false;
}
}
}); // code courtesy of CSS-Tricks
// apply the class of nav-active to the current nav link
$('a').on('click', function(e) {
e.preventDefault();
});
// get an array of 'href' of each a tag
var navLink = $('ul.nav a');
console.log(navLink);
var aArray = [];
for(var i = 0; i < navLink.length; i++) {
console.log(i);
var aChild = navLink[i];
var navArray = $(aChild).attr('href');
console.log(navArray);
aArray.push(navArray);
console.log(aArray);
var selector = aArray.join(" , ");
console.log(selector);
}
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
var tops = [];
$(selector).each(function(){
var top = $(this).position().top -90;
if(scrollTop > top) {
var id = $(this).attr('id');
$('.current').removeClass('current');
$('a[href="#'+id+'"]').parent().addClass('current');
}
tops.push(top);
});
});