Question

我有以下jquery。我想要做的是当我向下滚动我的页面传递900px时，div从左侧滑出，当我向上滚动传递900px时，它向左滑出视图。现在，如果我在页面底部滑出，如果我向上滚动它不会滑入。我只是想知道我做错了什么。我真的很感激一些方向。

$(window).scroll(function() {               
   var content = $(window).scrollTop();
        if (content < 950){
            $('.float-menu').animate({left: '-100px'},800);
            } else {
       if (content > 950) {
           $('.float-menu').animate({left: '0px'},500);
       }

  }

}）;

Answer 1

这可能会让你开始：

viz = false;

$(window).scroll(function(){
  pos = $(window).scrollTop();
  $('#msg').html(pos);
  if ( !viz && pos > 500){
    viz = true;
    $('#bob').animate({left : '10%' },800);
  }else if (viz && pos < 500){
    viz = false;
    $('#bob').animate({left : '-100%' },800);
  }
});

html,body{height:2000px;}
  #bob{position:fixed;left:-100%;}

#msg{position:fixed;right:0;width:100px;padding:20px;text-align:center;background:beige;border:1px solid orange;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="msg"></div>

<div id="bob">
  <img src="http://lorempixel.com/200/200" />
</div>

注意：使用布尔viz来跟踪是否运行动画。如果没有它，动画代码将在pos > 500或pos < 500

时不断运行

jquery动画左右滑动

1 个答案: