background color disappears on click

my problem is that when the screen gets under 600px then navbar becomes a dropdown navbar. Now the problem is that when you scroll down 100px the navbar gets a black background but when i wanna open the dropdown menu the black background disappears...

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="costume.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <!-- Connect stylesheet -->
        <link rel="stylesheet" href="costume.scss">
  </head>
  <body>
        <div class="topnav" id="myTopnav" align="left">
              <a href=""><p>Home</p></a>
              <a href=""><p>Portfolio</p></a>
              <a href=""><p>About</p></a>
              <a href=""><p>Impressum</p></a>
              <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
        </div>
        <div class="banner topnav"></div>
        <div id="wrapper"></div>

  <script>
        $(function(){
        $(window).scroll(function() {
              if($(window).scrollTop() >= 100) {
              $('div#myTopnav').addClass('scrolled');
        } else {
              $('div#myTopnav ').removeClass('scrolled');
                    }
              });
        });

        $(function(){
        $(window).scroll(function() {
              if($(window).scrollTop() >= 100) {
              $('a').addClass('scrolled2');
        } else {
              $('a').removeClass('scrolled2');
                    }
              });
        });


        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }

  </script>

  </body>
</html>

stylesheet

body {
  margin: 0;
  padding: 0;
  height: 2000px;
}

.topnav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 100px;
  transition: 0.35s all ease;
  z-index: 1000;
  overflow: hidden;
}

.topnav a {
  display: inline-block;
  margin: 20px 50px;;
  list-style: none;
  text-align: right;
  text-decoration: none;
  font-size: 17px;
  transition: 0.35s all ease;
}

a {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: none;
}


.topnav a:hover {
  text-decoration: none;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
  float: right;
  display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
  position: fixed;
  z-index: 1001;
 }
  .topnav.responsive .icon {
  position: fixed;
  right: 0;
  top: 0;
  }

  .topnav.responsive a {
  float: none;
  display: block;
  text-align: left;
  z-index: 1001;
  }
  .topnav.responsive a:hover {
  padding-left: 10px;
  color: white;
 }
 }

.banner {
  background: url('https://images.unsplash.com/photo-1431492299426-
2ea1ce429cc0?ixlib=rb-
0.3.5&q=80&fm=jpg&crop=entropy&s=135705633ad6367a0565fceae4a57372');
  background-position: center;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  z-index: 10;
  position: absolute;
}

.scrolled {
  min-height: 10px;
  color: inherit;
  background: black;
  transition: 0.35s all ease-in-out;
  opacity: 0.85;

}

.scrolled2 {
  color: white;
  opacity: 0.95;

  .topnav a:hover {
        background-color: red;
  }
}

https://codepen.io/anon/pen/RVYmKZ <-- use chrome https://jsfiddle.net/he7uhnya/

there is a gif so you can see what i mean https://gyazo.com/aa5c558cea87f645a32817cba5ff56db