How to adapt scrolling jQuery listeners to CSS media queries? (Javascript/ jQuery / Bootstrap)

I’m pretty new to all this; so I’ve been trying for the past day to get the jQuery to function. I have a navigation bar(nav bar) that changes background-color/color due to scrolling position, this is done through jQuery. I have it working effectively on desktop width (1350px) but trying to juggle both the media queries and the jQuery listeners seems impossible. I’ve applied eveything I’ve found, and tried it all twice but to no avail. If anyone knows how to do this then please get in touch.

can you put your code onto codepen?