粘性标题 - 初始加载时显示 2 个徽标

Question

我的网站上有一个带有粘性的标题条。它有一个透明的背景和一个白色的标志。向下滚动时，背景变为白色，徽标变为海军蓝色。

但是，在初始加载时，两个徽标图像都会显示，直到您滚动页面并且它可以正常工作。

谁能指出我正确的方向并告诉我如何在加载时隐藏海军标志，并且只在用户向下滚动时才第一次显示它？

我确定我错过了一些简单的东西。

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

你只需要在页面加载时默认隐藏.logo-navy即可：

.logo-navy {
  display: none;
}

还请注意，您可以使用 toggleClass() 和 toggle() 来干掉 JS 逻辑：

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>

Answer 2

只需为 init 添加下面的 CSS 代码

.logo-navy {
   display: none;
}

Answer 3

只需添加到 CSS 中：

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