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

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中类似的工具。

Answer 2

查看此链接http://codepen.io/anon/pen/gaeBbN您必须使用向下滚动事件，而不是单击以下代码，您将获得页面底部事件

  $(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()) {
   alert("bottom!");
 }
});