Waypoints Uncaught Error

Question

I'm using waypoints to change the color of my fixed header based on the background color it is over top. I'm using IF and ELSE statements to determine the page, so it knows which elements to change colors over.

Only the INDEX page am I getting this error: Uncaught Error: No element option passed to Waypoint constructor(…)

I can't seem to figure out why this is happening, so any help is great!

var page = window.location.pathname;
if($(window).width() > 900) {
    if(page == '/' ) {
        var waypoint = new Waypoint({
          element: document.getElementById('diagonal1'),
          handler: function(direction) {
              $('header').toggleClass("black-text");
          }, offset: 100
        })
    } else if(page == '/about-manny' ) {
        var waypoint = new Waypoint({
            element: document.getElementById('about-manny'),
            handler: function(direction) {
              $('header').toggleClass("black-text");
            }, offset: 100
        })
    } else {
        var waypoint = new Waypoint({
          element: document.getElementById('project'),
          handler: function(direction) {
              $('header').toggleClass("black-text");
          }, offset: 100
        })
    }
});

To this is action, here's a dev of my site: http://development.rdzbuild.com/

Answer 1

I had the same issue and my main.js file was after the waypoints.js file, however when i moved main.js to the bottom of the page it worked for some reason, would love to know why though.