Липкий заголовок - 2 логотипа при начальной загрузке

Question

У меня на сайте есть полоска заголовков, которая липкая. Имеет прозрачный фон и белый lo go. При прокрутке вниз фон меняется на белый, а lo go меняется на темно-синюю версию.

Однако при начальной загрузке оба изображения lo go отображаются, пока вы не прокрутите страницу. и он отлично работает.

Может кто-нибудь направить меня в правильном направлении и показать мне, как спрятать военно-морской флот lo go под нагрузкой и показывать его только в первый раз, когда пользователь прокручивает вниз?

Я уверен, что упускаю что-то простое.

jQuery(window).on("scroll", function() {
  if (jQuery(window).scrollTop() > 50) {
    jQuery(".header-container-fluid").addClass("headeractive");
    jQuery('.logo-navy').show();
    jQuery('.logo-white').hide();
  } else {
    //remove the background property so it comes transparent again (defined in your css)
    jQuery(".header-container-fluid").removeClass("headeractive");
    jQuery('.logo-navy').hide();
    jQuery('.logo-white').show();
  }
});

body {
  margin: 0;
}

.header-container-fluid {
  position: fixed;
  width 100%;
  top: 0;
  left: 0;
  height: 125px;
  z-index: 999;
  transition: all 0.2s ease-in-out;
  background-color: transparent;
  text-align: center;
}

.header-container-fluid.headeractive {
  background-color: #fff;
}

.logo-container {
  margin-top: 33px;
}

.logo-container img {
  width: 160px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}

.logo-container:hover img {
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid header-container-fluid" style="width:100%;">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 logo-container">
        <a href="<?php echo get_home_url(); ?>">
          <div class="logo-white"><img src="https://seedcreativity.co.uk/wp-content/uploads/2020/03/logo-jonas-white.png" alt="Jonas Sports Logo" title="Jonas Sports"></div>
          <div class="logo-navy"><img src="https://seedcreativity.co.uk/wp-content/uploads/2020/03/logo-jonas-navy.png" alt="Jonas Sports Logo" title="Jonas Sports"></div>
        </a>
      </div>
    </div>
  </div>
</div>
<div style="width: 100%; height: 2000px; background-color:#304FE0;"></div>

Answer 1

Просто добавьте код CSS ниже для init

.logo-navy {
   display: none;
}

Answer 2

просто добавьте к CSS:

.logo-container .logo-navy {
   display: none;
}

Answer 3

Вам просто нужно скрыть .logo-navy по умолчанию при загрузке страницы:

.logo-navy {
  display: none;
}

Также обратите внимание, что вы можете DRY поднять JS logi c, используя toggleClass() и toggle():

jQuery($ => {
  $(window).on("scroll", function() {
    var scrolledDown = $(window).scrollTop() > 50;
    $(".header-container-fluid").toggleClass("headeractive", scrolledDown);
    $(".logo-navy").toggle(scrolledDown);
    $(".logo-white").toggle(!scrolledDown);
  });
});

body {
  margin: 0;
}

.header-container-fluid {
  position: fixed;
  width 100%;
  top: 0;
  left: 0;
  height: 125px;
  z-index: 999;
  transition: all 0.2s ease-in-out;
  background-color: transparent;
  text-align: center;
}

.header-container-fluid.headeractive {
  background-color: #fff;
}

.logo-container {
  margin-top: 33px;
}

.logo-container img {
  width: 160px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}

.logo-container:hover img {
  opacity: 0.5;
}

.logo-navy {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid header-container-fluid" style="width:100%;">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 logo-container">
        <a href="<?php echo get_home_url(); ?>">
          <div class="logo-white"><img src="https://seedcreativity.co.uk/wp-content/uploads/2020/03/logo-jonas-white.png" alt="Jonas Sports Logo" title="Jonas Sports"></div>
          <div class="logo-navy"><img src="https://seedcreativity.co.uk/wp-content/uploads/2020/03/logo-jonas-navy.png" alt="Jonas Sports Logo" title="Jonas Sports"></div>
        </a>
      </div>
    </div>
  </div>
</div>
<div style="width: 100%; height: 2000px; background-color:#304FE0;"></div>