javascript - 延迟 addClass jQuery

Question

我在滚动条上创建了一个粘性导航，其上方的标题会缩小。现在，当导航变得粘滞时，我试图让 Logo 从左侧进入。它有效，但来得太早了。如果你看一下我的演示，你会发现它出现在我不想要的标题上。有什么办法可以延迟它的进入，直到导航固定到顶部吗？

演示:https://codepen.io/Reece_Dev/pen/xqaEZX

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 20) {
    $("header").addClass("shrink");
    //setTimeout(function(){
    $(".logo_animated").addClass("logo_display");
    //}, 900);
  } else {
    $("header").removeClass("shrink");
    $(".logo_animated").removeClass("logo_display");
  }

});

* {
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}

#head-background {
  width: 100%;
  background-color: #111;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

header {
  width: 1200px;
  height: 100px;
  margin: 1em auto;
  text-align: center;
  overflow: hidden;
  transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
}

.image {
  display: inline-block;
  margin: 0 auto;
  max-width: 322px;
  max-height: 100%;
  padding-top: 5px;
}

.address-info {
  float: left;
  color: #fff;
  width: 250px;
  text-align: left;
  font-size: 1rem;
  padding-top: 5px;
  padding-left: 1%;
  background-color: aqua;
}

.head-icons {
  float: right;
  list-style-type: none;
  display: block;
  width: 250px;
  text-align: right;
  background-color: aqua;
}

.head-icons li {
  display: inline-block;
  padding-right: 3%;
}

.head-icons li a {
  color: #fff;
  font-size: 2.5rem;
}

.head-icons li:nth-child(4) {
  display: block;
  margin-top: 0.5rem;
  color: #fff;
  font-size: 1rem;
}

.shrink {
  height: 0;
  margin-top: 0;
  margin-bottom: 0;
}

nav {
  display: block;
  width: 100%;
  background-color: #777;
  font-size: 0;
}

nav ul {
  overflow: hidden;
  color: #fff;
  text-align: center;
  -webkit-transition: max-height 0.4s;
  -ms-transition: max-height 0.4s;
  -moz-transition: max-height 0.4s;
  -o-transition: max-height 0.4s;
  transition: max-height 0.4s;
}

nav ul li {
  display: inline-block;
  padding: 1rem 2rem;
}

nav ul li a {
  color: inherit;
  text-decoration: none;
  font-size: 1.5rem;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.burger-button {
  width: 100%;
  text-align: right;
  box-sizing: border-box;
  padding: 0.5rem;
  cursor: pointer;
  color: #fff;
  font-size: 1.5rem;
  display: none;
}

.logo_animated {
  position: absolute;
  top: 1rem;
  margin-left: -20rem;
  width: 200px;
  display: inline-block;
  transition: margin-left 0.5s cubic-bezier(0.5, 0, 0.5, 1.6);
}

.logo_display {
  margin-left: 1rem;
}

#body {
  height: 2000px;
}

<div id="head-background">
  <header>
    <h4 class="address-info">00 The Street<br>Bramhope<br>Leeds<br>LS00 000</h4>
    <img class="image" src="images/PopsiesLogoWhite.png">
    <ul class="head-icons">
      <li><a href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
      <li><a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
      <li><a href="mailto:popsiesfishandchips@yahoo.co.uk"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
      <li>0113 1234567</li>
    </ul>
  </header>

  <nav>
    <img class="logo_animated" src="images/popsies.svg">
    <div class="burger-button">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
    <ul id="height">
      <li><a href="#welcomeAnchor">Welcome</a></li>
      <li><a href="#menuAnchor">Menu</a></li>
      <li><a href="#timesAnchor">Opening Times</a></li>
    </ul>
  </nav>
</div>

<div id="body"></div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

Answer 1

您实际上可以做到这一点，没有任何延迟或添加/删除两个类。使用硬编码延迟实际上是一种不好的做法。如果你调整 CSS 的继承方式，你可以这样做:

Here's the updated codepen and relevant code below:

1. 将 .shrink 添加到 JS 中的 #head-background 元素，并在 css 中应用规则，例如:

 #head-background.shrink header{
      height: 0;
      margin-top: 0;
      margin-bottom: 0;
    }

像这样声明您的 .logo_animated 类:

#head-background.shrink .logo_animated {//apply this rule only when #head-background has .shrink class too. 
      margin-left: 1rem;
      transition: margin-left .8s cubic-bezier(0.5, 0, 0.5, 1.6);
    }

您的 JavaScript 现在看起来就像:

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 20) {
    $("#head-background").addClass("shrink");
  } else {
    $("#head-background").removeClass("shrink");
  }

});

请注意，您不需要单独添加/删除 .logo_display 类，它现在通过 css 继承来实现。

其工作原理如下:

您将收缩类应用于 head 和 .logo_animated 的父级。然后，您设置一个选择器 #head-background.shrink .logo_animated ，它告诉浏览器仅在 .shrink 类应用于父级之后应用规则。这基本上给了你想要的效果。请记住，您仍然需要正确调整动画时间。在 codepen 示例中，我使用 .8s 表示 .logo_animated。您现在可以进一步细化您的动画，使其看起来更平滑，我基本上将其保留在您的位置