Waypoints change with changing window width?

I have encountered a problem which I just can't get right - even after searching the net for hours.

I'm currently building my first website and want to do it with one style for mobile devices and one for desktops, my breakpoint is 980px. So far everything works fine, but now I have a problem with the Waypoints. So this is my code so far referring to the waypoints:

<!--Waypoints-->
<!--<script src="js/noframework.waypoints.min.js"></script>-->
<!--<script src="js/jquery.waypoints.js"></script>-->
<script src="js/jquery.waypoints.min.js"></script>
<!--<script src="js/noframework.waypoints.js"></script>-->
<script>    
    var portfolio = new Waypoint({
        element: document.getElementById("port"),
        handler: function(){
            document.getElementById("portf").selected = "true";
        }
    });
</script>
<script>    
    var portfolio = new Waypoint({
        element: document.getElementById("box6"),
        handler: function(){
            document.getElementById("portf").selected = "true";
        }
    });
</script>
<script>    
    var skills = new Waypoint({
        element: document.getElementById("skil"),
        handler: function(){
            document.getElementById("ski").selected = "true";
        }
    });
</script>
<script>    
    var skills = new Waypoint({
        element: document.getElementById("skil2"),
        handler: function(){
            document.getElementById("ski").selected = "true";
        }
    });
</script>
<script>    
    var aboutme = new Waypoint({
        element: document.getElementById("abme"),
        handler: function(){
            document.getElementById("abu").selected = "true";
        }
    });
</script>
<script>    
    var aboutme = new Waypoint({
        element: document.getElementById("abme2"),
        handler: function(){
            document.getElementById("abu").selected = "true";
        }
    });
</script>
<script>    
    var contact = new Waypoint({
        element: document.getElementById("con"),
        handler: function(){
            document.getElementById("cont").selected = "true";
        }
    });
</script>

So far this applies only to my mobile version that is at max 979px in width. There is a banner on top in which a dropdown menu is placed as navigation. The dropdown changes depending on where you are on the page. The first getElementById is always the waypoint, on which the change in the dropdown changes, the second one is the element, that is actually changed in the dropdown.

Now I would like to change this function for when the window is wider than 980px. In the desktop version there isn't a dropdown anymore - instead there should show a banner when reaching a certain waypoint. I already set up the banner as hidden img.

So I know I have to use an if statement. But, as mentioned before, I just don't get where I have to include that into the code. Mostly the part with the var at the beginning is really confusing me.

I would be really gratefull if anyone could help me on this issue!