Код работает на codepen, но не на моем сайте

Итак, я применил исправление к предыдущей проблеме в кодеде, однако, когда я копирую javascript/JQuery из кодекса на мой сайт, он, похоже, не работает (и тем самым я означают все javascript). Вот рабочая ссылка код пера: http://codepen.io/anon/pen/aOXMLR Код работает на codepen, но не на моем сайте

Вот мой код:

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); 
    }); 

});

источник

2015-08-07 Vectriixx

Вы можете проверить первую консоль в Dev-инструмент, есть любая ошибка выскочит? – fuyushimoya

Это потому, что элементы, которые, использование которых не присутствует на странице при запуске скрипта. Просто переместите сценарий в конце тела:

<script type="text/javascript" src="function.js"></script> 
</body>

или завернуть содержание сценария к document.ready событие:

$(document).ready(function() { 
    // ... 
});

источник

2015-08-07 10:27:44 Razem

Наверное, это так. +1 – ebilgin

Код работает на codepen, но не на моем сайте

ответ

Смежные вопросы