html - 如何在固定标题的中心将 2 个 Logo 彼此叠加(叠加)...为滚动动画效果做准备

Question

这里有类似的问题，但我找不到适合我的解决方案。我是网络 build 的新手，所以花了很多努力才最终修复了我的标题并按照我需要的方式进行设计。现在我正在做一些动画。我想在用户向下滚动时转换到不同的 Logo 。

更清楚一点: Logo 1 位于 Logo 2 之上，并且是唯一可见的 Logo 。当用户向下滚动时，顶部的标志将消失，露出下面的第二个标志。据我了解，我需要将两个 Logo 都居中并正确定位......其中一个位于(覆盖)另一个之上。这似乎可以通过 position: absolute 容器来完成，然后将 Logo 放置在 position: relative 中。但是，这样做会完全破坏我的 nav 并且我不知道如何更正它。我也尝试过使用 z-index 但没有成功。我将不胜感激帮助解决这个问题。先感谢您。

body {
  margin: 0;
  line-height: 1.2em;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100%;
}

header {
  height: 160px;
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  /* border-bottom: 15px solid rgb(197, 179, 55) */
}

#nav {
  display: flex;
  justify-content: center;
  flex-direction: row;
  height: 180px;

}

.lg_logo {
  flex: 0 0 auto;
  padding: 0 30px;
  margin-top: 12px;
}

.sm_logo {
  flex: 0 0 auto;
  padding: 0 30px;
  margin-top: 12px;
}

#nav_left {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-end;
  margin-top: 80px;
}

#nav_right {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-start;
  margin-top: 80px;
}

a {
  flex: 0 0 auto;
  text-decoration: none;
  /* color: rgba(0, 0, 0, 0.8); */
  color: rgb(96, 96, 96);
  font-family: Tenar Sans;
  font-size: .85em;
  margin: 0 1.4em;
  height: 20px; /* need this to correct issue with hover effect */
}

<header>
  <div id="nav">
      <div id="nav_left">
          <a href="index.html">HOME</a>
          <a href="services.html">SERVICES</a>
          <a href="portfolio.html">PORTFOLIO</a>
      </div>
          <a href="index.html" id="logo" class="lg_logo"><img src="images/logo_6_small.png" alt="Claire Crawford"
                  id="logo_Claire" /></a>
          <a href="index.html" id="logo" class="sm_logo"><img src="images/logo_single_black_bird_120_blue_cc.png"
                  alt="Claire Crawford" id="logo_Claire" /></a>
      <div id="nav_right">
          <a href="blog.html">BLOG</a>
          <a href="about.html">ABOUT</a>
          <a href="contact.html">GET IN TOUCH</a>
      </div>
  </div>
</header>

Answer 1

根据您更新的问题，您可以使用 jQuery $(window).scroll(function() {}) 执行此操作。

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 0) {
      $(".navbar").addClass("navbar-scroll");
      $(".logo").show();
    } else {
      $(".navbar").removeClass("navbar-scroll");
      $(".logo").hide();
    }
    if (scroll > 10) {
      $(".navbar").addClass("nav-color");
      $(".logo_main").show();
      $(".logo").hide();
    } else {
      $(".navbar").removeClass("nav-color");
      $(".logo_main").hide();
      $(".logo").show();
    }
  });
});

body {
  margin: 0;
  line-height: 1.2em;
  font-family: Arial, Helvetica, sans-serif;
  height: 200vh;
}

header {
  height: 160px;
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  /* border-bottom: 15px solid rgb(197, 179, 55) */
}

#nav {
  display: flex;
  justify-content: center;
  flex-direction: row;
  height: 180px;
  background: black;
}

.lg_logo {
  flex: 0 0 auto;
  padding: 0 30px;
  margin-top: 12px;
}

.sm_logo {
  flex: 0 0 auto;
  padding: 0 30px;
  margin-top: 12px;
}

#nav_left {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-end;
  margin-top: 80px;
}

#nav_right {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-start;
  margin-top: 80px;
}

a {
  flex: 0 0 auto;
  text-decoration: none;
  /* color: rgba(0, 0, 0, 0.8); */
  color: rgb(96, 96, 96);
  font-family: Tenar Sans;
  font-size: 0.85em;
  margin: 0 1.4em;
  height: 20px;
  /* need this to correct issue with hover effect */
}

.navbar-scroll {
  transition: background-color 0.5s;
}

img {
  width: 200px;
}

.nav-color {
  background-color: white !important;
  -webkit-transition: all 0.8s cubic-bezier(0.68, 0, 0.29, 1);
  -moz-transition: all 0.8s cubic-bezier(0.68, 0, 0.29, 1);
  transition: all 0.8s cubic-bezier(0.68, 0, 0.29, 1);
  opacity: 1;
  -webkit-animation: fadeInDown 1s alternate ease;
  -moz-animation: fadeInDown 1s alternate ease;
  animation: fadeInDown 1s alternate ease;
  box-shadow: 5px 8.66px 30px 0 rgba(31, 35, 37, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div id="nav" class="navbar">
    <div id="nav_left">
      <a href="index.html">HOME</a>
      <a href="services.html">SERVICES</a>
      <a href="portfolio.html">PORTFOLIO</a>
    </div>
    <a href="index.html" id="logo" class="lg_logo" style="padding: 0px;width:250px text-align:center">
      <img src="logo2" alt="logo2" id="logo_Claire" class="logo_main" style="display:none" />
      <img src="logo1" alt="logo1" id="logo_Claire" class="logo"/>
    </a>
    <div id="nav_right">
      <a href="blog.html">BLOG</a>
      <a href="about.html">ABOUT</a>
      <a href="contact.html">GET IN TOUCH</a>
    </div>
  </div>
</header>