下拉以显示HTML中的div

Question

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

这将是像刷新刷新功能的东西，但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>