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>

下拉以在HTML中显示div

1 个答案: