Change Background Color

it stays white when refreshing the page but when you scroll a bit down and up again it turns transparent how i want it to be.

HTML

<div class="navbar-fixed navbar-add">
 <!-- if i add the navbar-trans the navbar is not shown at all -->
</div>

<div class="banner bg-picture" id="change_color" style="background-image: linear-gradient(-225deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.35) 50%), url('https://www.pets4homes.co.uk/images/articles/1646/large/kitten-emergencies-signs-to-look-out-for-537479947ec1c.jpg')">
  <h4>the navbar above should be transparent on refresh and when i scroll down it should become white</h4>
</div>
<div>
    <div>
      <p>Roof party kale chips fixie viral DIY salvia seitan XOXO Banksy. Chia plaid meggings, DIY Thundercats salvia freegan jean shorts gentrify. Retro four loko meh, banjo bespoke ennui wolf before they sold out vegan keytar gastropub beard seitan fashion axe street art. Cosby sweater American Apparel gluten-free skateboard leggings plaid swag banh mi Williamsburg drinking vinegar, vinyl slow-carb brunch photo booth. Sartorial Etsy Truffaut, small batch banh mi letterpress tousled cardigan leggings 3 wolf moon ethical messenger bag PBR&B. Tofu Schlitz narwhal, banjo Bushwick forage trust fund next level bespoke. Gastropub scenester Truffaut locavore deep v, forage ugh Wes Anderson twee.

Pug beard American Apparel post-ironic normcore, aesthetic plaid gentrify narwhal asymmetrical craft beer photo booth gastropub Echo Park selfies. Asymmetrical Etsy church-key Cosby sweater street art, ethical tattooed Portland shabby chic small batch twee scenester hella seitan direct trade. Plaid mlkshk lomo try-hard, Portland High Life selvage cray VHS quinoa. Ennui selfies skateboard, lo-fi iPhone mustache kogi. Tumblr brunch wolf Intelligentsia gluten-free Bushwick. Blog tote bag keytar, twee put a bird on it 8-bit chambray iPhone pop-up Intelligentsia. Brunch ethical quinoa cray, hashtag before they sold out Banksy.

+1 wayfarers Schlitz tofu, next level single-origin coffee actually. Butcher fap artisan, Kickstarter beard messenger bag narwhal forage master cleanse...

CSS

.navbar-fixed {
  position: fixed;
  display: flex;
  height: 50px;
  padding: 0px 30px;
  align-items: center;
  justify-content: space-between;
  left: 0px;
  top: 0px;
  z-index: 50;
  width: 100%;
  background-color: white;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03);
}
.navbar-trans {
  background-color: transparent !important;
  box-shadow: none !important;
}
.banner {
  height: 96.75vh;
  width: 100vw;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.banner h1 {
  font-size: 3.75em;
  letter-spacing: 0.02em;
  font-weight: 300;
  text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
  line-height: 120%;
}
.bg-picture {
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center;
}

JavaScript

function updateNavStyle() {
  if(landingPage.length > 0 && location.href.toLowerCase().indexOf(landingPage.toLowerCase()) >= 0) {
    var offset = $('#change_color').offset();
    var scroll_start = $(document).scrollTop();
    if (scroll_start > offset.top) {
      // the white normal navbar
      $(".navbar-add").removeClass("navbar-trans");
    } else {
      // what the users sees when he lands on the page
      $(".navbar-add").addClass("navbar-trans");
    }
  }
}

$(document).ready(function() {
  var scroll_start = 0;
  var change_color = $('#change_color');

  if (change_color.length) {
    $(document).scroll(updateNavStyle);
    updateNavStyle(); // Note this.
  }
});