CODEWITHSUNDEEP
jquery
user6462102
user6462102

Reputation: 11

jquery animation to slide left and back

I have the following jquery. What i am trying to do is when i scroll down my page pass 900px a div slides out from the left and when i scroll up pass 900px it slides left out of view. right now if slides out when i am at the bottom of the page and if i scroll back up it does not slide in. i just cant figure what i am doing wrong. i would really appreciate some direction.

$(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);
       }

  }

});

Upvotes: 1

Views: 203

Answers (1)

cssyphus
cssyphus

Reputation: 40096

This might get you started:

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>

Note: using the boolean viz to keep track of whether to run the animate or not. Without it, the animate code will run constantly when pos > 500 or when pos < 500

Upvotes: 1

Related Questions