所以我已经在 codepen 上实现了对先前问题的修复，但是当我将 javascript/JQuery 从 codepen 复制到我的站点时，它似乎不起作用(我的意思是所有 javascript)。这是工作代码笔链接:http://codepen.io/anon/pen/aOXMLR
这是我的代码:
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);
});
});
最佳答案
那是因为您正在使用的元素在脚本运行时并未出现在页面中。只需将脚本移动到正文末尾:
<script type="text/javascript" src="function.js"></script>
</body>
或者将脚本内容包装到document.ready事件中:
$(document).ready(function () {
// ...
});
关于javascript - 代码在 codepen 上有效，但在我的网站上无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31875451/