下拉以在 HTML 中显示 div [关闭]

Question

在使用 AngularJS 构建的 Web 应用程序中实现类似 snapchat 的功能的最佳方法是什么。当用户向下滚动/下拉屏幕时，会出现一个 div。当用户向上滚动时，div 会被向上推。

这类似于 snapchat 滑动刷新功能，但 div 会一直停留在那里，直到用户不向上滚动为止。

感谢您抽出宝贵时间回答这个问题。

Answer 1

这样的事情应该让你开始：

inout='in', win = $(window);
win.scroll(function(){
  $('#msg').html( win.scrollTop() );
  
  if ( win.scrollTop() > 200 && inout=='in'){
    $('#slideOut').animate({
        left : 0
    },500);
    inout = 'out';
  }
  if (win.scrollTop() < 200 && inout=='out'){
    $('#slideOut').animate({
        left : '-100%'
    },500);
    inout = 'in';
  }
  
}); //END win.scroll

#wrap{height:2000px;}
#slideOut{position:fixed;top:80px;left:-100%;padding:50px;background:wheat;}
#msg{position:fixed;top:50px;right:10px;padding:20px;background:palegreen;border:1px solid green;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideOut">This div slides out</div>
<div id="wrap">
  Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. 
</div>
<div id="msg"></div>