Question

所以我已经在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);
  });

});

Answer 1

这是因为当脚本运行时，您正在使用的元素不在页面中。只需在身体末端移动脚本：

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

或将脚本的内容包装到document.ready事件：

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

代码适用于codepen但不适用于我的网站

1 个答案: