How to Change Background-Color on my Fixed Navigation Menus when Scrolling Using Waypoints(JS ES6)

Im trying to change the background-color of my navigation menus(navbar) when someone scrolls it using waypoints. Problem was, it didn't work. Because "I think", its because of the video tutorial I watched which is outdated? Or there seems to be a problem with my code? I reviewed the code 10 times, like I almost had a crossed-eye vision.

Here is the final code of the video tutorial I watched.

import $ from 'jquery';
import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';

class StickyHeader {
    constructor() {
        this.siteHeader = $(".site-header");
        this.headerTriggerElement = $(".large-hero__title");
        this.createHeaderWaypoint();
    }

    createHeaderWaypoint() {
        var that = this;
        new Waypoint({
            element: this.headerTriggerElement,
            handler: function() {
                that.siteHeader.addClass("site-header--dark");
            }
        });
    }
}

export default StickyHeader;

I would really appreciate if someone could help me. And here is my App.js

import MobileMenu from './modules/MobileMenu';
import RevealOnScroll from './modules/RevealOnScroll';
import $ from 'jquery';
import StickyHeader from './modules/StickyHeader';

var mobileMenu = new MobileMenu();
var revealOnScroll($(".feature-item"), "85%");
var revealOnScroll($(".testimonial"), "60%");
var stickyHeader = new StickyHeader();

It looks like you are combining jQuery with a version of Waypoints.js that is not meant to work with jQuery.

At the moment you are selecting elements with jQuery, which will give you a result in the form of a jQuery object

$(".site-header");
// This will result in:
{
  0: <div class=".site-header">...</div>
}

But the element property on the Waypoint constructor expects an element instead of an object. So you could either select the elements with Vanilla JavaScript using document.querySelector.

Also use classList.add instead of addClass since you are now dealing with pure JS elements instead of jQuery objects.

import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';

class StickyHeader {
    constructor() {
        this.siteHeader = document.querySelector('.site-header');
        this.headerTriggerElement = document.querySelector('.large-hero__title');
        this.createHeaderWaypoint();
    }

    createHeaderWaypoint() {
        var that = this;
        new Waypoint({
            element: this.headerTriggerElement,
            handler: function() {
                that.siteHeader.classList.add("site-header--dark");
            }
        });
    }
}

export default StickyHeader;

Or use the jQuery variant of the framework and use it like this.

var $siteHeader = $(".site-header");
var $headerTriggerElement = $(".large-hero__title");

$headerTriggerElement.waypoint({
  handler: function() {
    $siteHeader.addClass("site-header--dark");
  }
});