html - 如何给文本框添加动画效果？

Question

我有一个位于页面底部的搜索栏，我希望首先隐藏该搜索栏，以便在我向下滚动时搜索栏应该通过淡入或淡出效果出现。

这是我的搜索栏 HTML 代码:-

 <div class="">
  <div class="container-4 col-lg-12 col-md-12 col-xs-12">
      <div>
          <div class="col-lg-4 col-md-4 col-xs-4"></div>
    <input class="col-lg-4 col-md-4 col-xs-4 form-control searchbar" type="text" id="search" placeholder="Discover more about any career you like" />    
    <button (click)="test()" class="icon"><i class="fa fa-search"></i></button>
      <div class="col-lg-4 col-md-4 col-xs-4"></div>
      </div>     
  </div>
</div>

Answer 1

图书馆航点就是这样做的。您可以在此处查看基本示例:getting started with waypoints .有了这个，当你按照你想要的方向滚动到你的搜索栏时，你就有了一个事件。然后你可以使用 fadeIn 或 jQuery 中的类似东西。