Geek asks and answers

Jquery return to starting position on scroll DOWN (?)

I searched high and low and didn't seem to find the answers. I am new to jquery and I have all the animations that work correctly on ScrollTop, but when I scroll to return to the top of the page, I would like for one bar with text to return to its original position. I got to the point where it flickered, so I think Im on the right track. Please, help.

Here is the website: www.artdesignstudios.com/prestige/

Here is the Im script working with:

<script>
$(window).scroll(function(){
    if ($(window).scrollTop() >= 100){
        $('#stripe1').animate({'width': 0},1000);
    $('#cta1').animate({'left': -100},1000)


    }
    else if ($(window).scrollTop() < 400) {
     $("#stripe1").css({'width':'100%'},800);
     $("#cta1").css('opacity','1');
    }


});

</script>
+3
source share
1 answer

Basically, the main problem of flickering is that the conditions are not sufficient if both cover the same range, which I mentioned in the comments.

N < 400 can also be >= 100 and after 400 everything is >= than 100

, scroll, boolean var, , . , , 150 scroll height:

var animated = false;   //added variable to control if stripe was animated
$(window).scroll(function () {
  if (!animated && $(window).scrollTop() >= 150) { //changed
    $('#stripe1').animate({'width': 0}, 1000);
    $('#cta1').animate({'left': -100}, 1000);
    animated = true; //it was animated

  } else if (animated && $(window).scrollTop() < 150) { //changed
    $("#stripe1").css({'width': '100%'}, 800);
    $("#cta1").css('opacity', '1');
    animated = false; //animation ended
  }
});

FIDDLE,

+1

More articles:


All Articles