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。这样，当您按照所需方向向搜索栏滚动时，就会有一个事件。然后你可以使用jade中的fadeIn或类似的东西。

Answer 2

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

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

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

2 个答案: