Question

这是淡入淡出动画的css代码

.searchbar {
  opacity: 0;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

当我向下滚动（700px之后）并向上滚动（因此小于700px）时，我希望搜索栏淡入淡出

这是js

中的脚本

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 700) {
    $(".searchbar").addClass("animated_fi fadeIn");
  } else {
    $(".searchbar").removeClass("animated_fi fadeIn");
  }
});

Answer 1

如果我正确理解您的查询。你是这样的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <div id="menu">
    <center>
      <h1>Hello</h1>
    </center>
    <form class="search-container">
      <input type="text" id="search-bar" placeholder="What can I help you with today?">
      <a href="#"><img class="search-icon" src="http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon.png"></a>
    </form>
  </div>

  <center>
    <div>
      <h1 style="color: white;">Scroll Down</h1>
    </div>
  </center>

</body>

{{1}}

{{1}}

这会在用户滚动时淡出搜索栏，然后在向后滚动时淡出。如果您希望效果发生在700px，只需更改 JQuery 300 - ＆gt; 700.

向下滚动时淡入，向上滚动时淡出

1 个答案: