Change header when page scrolls

I would like to change my navigation from the transparent background to a white background. The navigation should decrease in size and the logo should disappear.

It should look exactly like on this page: https://www.praxis-loeber.de

I have already written jquery code for it but unfortunately it still doesn't work.

I would be very happy if someone could show me where the error lies in my code.

Here is my code:

$(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")
  }
});

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

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

.navigation {
  position: sticky;
  top: 0px;
}

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

.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: 84px;
  -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;
  }
}

.description {
  background-color: #88c602;
  text-align: center;
  color: rgb(255, 255, 255);
  font-family: 'Ubuntu', regular italic;
  font-size: 200%;
  padding-top: 27px;
  padding-bottom: 27px;
}

.description-title {
  font-size: 180%;
  margin-top: -15px;
}

#side-menu-trigger {
  float: right;
  color: rgb(255, 255, 255);
  margin-top: 35px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 25px;
  padding-left: 25px;
  font-size: 200%;
  height: inherit;
  @media(min-width: 950px) {
    display: none;
  }
}

<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="img/Logo_Petra.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>