Change header when page scrolls

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-menu" style="display: none;">
  <h3>Navigation</h3>
  <ul class="side-menu-navigation">
    <?php require (__DIR__ . "/navigation-   links.php"); ?>
    <?php require (__DIR__ . "/navigation-rechts.php") ?>
  </ul>
</div>

<header class="header">
  <div class="navigation">
    <div class="header-logo-container">
      <a href="index.php"><img src="https://dummyimage.com/200x100/000/fff.png" class="header-logo" alt="Logo"></a>
    </div>
    <nav class="header-navbar">
      <ul class="header-navbar-links">
        <?php require (__DIR__ . "/navigation-links.php"); ?>
      </ul>
      <ul class="header-navbar-rechts">
        <?php require (__DIR__ . "/navigation-rechts.php"); ?>
      </ul>
      <button id="side-menu-trigger">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
    </nav>
    <div class="hr">
      <hr class="footer-hr" />
    </div>
  </div>
  <div class="container" onload="document.getElementById(slogan).style.opacity='1'">
    <div class="slogan">
      Herzlich Willkommen in der<br>
      Praxis für Sprachtherapie<br>
      Petra Daase-Beck
    </div>
  </div>
</header>
<div class="description">
  <div class="description-title"><strong>Wortstark</strong></div>
  in Sprache und Schrift für Kinder - Jugendliche<br>
  und Erwachsene
</div>

CSS

*{
  padding:0;
  margin:0;
}

.header {
  height: 820px;
  background-image: url("https://dummyimage.com/800x800/ff00ff/fff.png");
  background-size: cover;
}

.header-unterseite {
  height: 500px;
  background-image: url("../img/beispiel.png");
  background-size: cover;
}

.navigation {
  position: fixed;
  top: 0px;
  width:100%;
}

.navigation.transparent {
  background-color: red;
}

.header-logo-container {
  text-align: center;

  @media(max-width: 950px) {
    display: none;
  }
}

.header-logo {
  width: 11%;
  margin-top: 20px;
}

.header-navbar-links {
  float: left;
  font-family: 'Open Sans', bold;
  margin-top: -50px;
  font-size: 100%;
  margin-left: 150px;

  @media(max-width: 950px) {
    display: none;
  }
}

.header-navbar-links li {
  float: right;
  list-style-type: none;
  margin-right: 26px;
}

.header-navbar-links a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

.header-navbar-links a:hover {
  color: #88c602;
}

.header-navbar-rechts {
  color: white;
  float: right;
  margin-top: -50px;
  font-family: 'Open Sans', bold;
  font-size: 100%;
  margin-right: 150px;

  @media(max-width: 950px) {
    display: none;
  }
}

.header-navbar-rechts li {
  float: left;
  list-style-type: none;
  margin-right: 26px;
}

.header-navbar-rechts a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

.header-navbar-rechts a:hover {
  color: #88c602;
}

.footer-hr {
  color: rgb(255, 255, 255);
  width: 100%;
  height: 5px;

  @media(max-width: 950px) {
    display: none;
  }
}

.slogan {
  color: rgb(255, 255, 255);
  text-align: center;
  font-family: 'Ubuntu', regular;
  font-size: 450%;
  margin-top: 110px;

  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
 ...

JavaScript

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

       if (scroll > 10)  {
            $(".navigation").addClass("transparent");
            $(".hr").hide();
            $(".header-logo-container").hide();
            $("a").css("color", "black");
        
        } else {
            $(".navigation").removeClass("transparent");
            $(".hr").show();
            $(".header-logo-container").show();
            $("a").css("color","white")
        }
});