Custom Script not working after React Route change

Question

I recently tried creating a dynamically styled Bootstrap 4 Navbar within React while exclusively using native Bootstrap 4 components and not having to rely on such things as react-bootstrap or reactstrap.

At first, this worked out rather well as I did not encounter any problems when I was using a script called ScrollPosStyler to create an "affix-top" navbar like in Bootstrap 3 which had a transparent background when at the top of the page and a dark background when scrolling across the page.

However, I wanted to natively use bg-dark and bg-transparent instead of the sps classes, so I created a listener based on the "attrchange" jQuery plugin which looked kind of like this:

$('nav.sps').each(function() {
  var elem = $(this);

  elem.attrchange({
    trackValues: true,
    callback: function(e) {
      if (e.attributeName == "class") {
          if (e.newValue.search("sps--abv") != -1) {
            elem.removeClass("bg-dark");
            elem.addClass("bg-transparent");
          } else if (e.newValue.search("sps--blw") != -1) {
            elem.removeClass("bg-transparent");
            elem.addClass("bg-dark");
          }
        }
      }
    }
  });

});

However, I also tried implementing the same functionality for a light navbar that turns dark upon scrolling, and it was at this point that I encountered my main problem.

I added a function which took the "color" prop I assigned to each Navbar used in the various routes and added appropiate classes depending on the value of the prop, which looked very similar to this:

appropriateNavbarClass(props) {
    switch (props.color) {
        case "transparent":
            return "navbar-dark bg-transparent sps sps-t";
            break;
        case "light":
            return "navbar-light bg-light sps sps-l";
            break;
        case "dark":
        default:
            return "navbar-dark bg-dark";
            break;
    }
}

// and further down in render()
<nav class={"[standard navbar classes] " + this.appropriateNavbarClass(this.props)}>

The corresponding "sps-?" classes were then used to update my "attrchange" listener so it now added and removed bg-transparent or bg-light accordingly.

At first, I did not notice any problems with this code either, until I switched routes within the page: After switching, I would need to scroll down a bit and then all the way to the top of the page for ScrollPosStyler to pick up the newly rendered navbar element. I already tried manually initializing sps after a route update with ScrollPosStyler.init(); but this unfortunately only resulted in "ScrollPosStyler is not defined" (Note: I tried this with all available syntaxes [es6 import, commonjs require, script tag at the bottom of the page], yet it never worked out in any way)

As always, If you need any additional code or information provided to answer the question, feel free to ask me and I will gladly do so. Also, I appreciate all suggestions for improving my code and or coding habits in general, for example for minifying my attrChange listener or simplifying navbar coloring.