HTMLでdivを表示するようにプルダウン

Question

AngularJSで構築されたWebアプリケーションでスナップチャットのような機能を実現するにはどうすればよいでしょうか。ユーザーが画面を下にスクロールすると、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>