Html 如何为文本框提供动画效果？

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

这是我的搜索栏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>

---

库航路点正是这样做的。您可以在此处查看基本示例：。这样你就有了一个事件，当有人朝你想要的方向滚动到你的搜索栏时。然后，您可以使用fadeIn或jQuery中的类似内容。

查看此链接您必须使用向下滚动事件，而不是单击 使用下面的代码，您将获得页面底部事件

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

---

我正在研究angular 2，我能用这个吗？不是原始的，但你可以用angular航路点：@UtkarshGautam是的，你可以看看这个例子