0

I have tryed this code in my site simmona.uchenici.bg/test/ and the result is that the effect don't stop. I want scrolling effect to stop when the section title is on bottom of the window and only image section to continue while they catch up. Also I don't know why my pic is zooming on scroll... How to debug that?

$(document).ready(function(){
$(document).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /680 > 0) {
  $('#textbox').animate({
    'marginTop' : "+=50px" 
  });
}
else {
  $('#textbox').animate({
    'marginTop' : "-=10px" 
  });
}

});

$(document).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /680 > 0) {
  $('#image').animate({
    'marginTop' : "+=50px" 
  });
}
else {
  $('#image').animate({
    'marginTop' : "-=5px" 
  });
}`});

});`

Simona Kraseva
  • 1
  • 1

1 Answers1

0

You don't queue your animations. What happens right now is you scroll up, down, up down... but animation doesn't stop, while you already give new orders by scrolling. In order to fix that check .stop documentation for further use.

$(document).ready(function(){

    $(document).bind('mousewheel', function(e){

        if(e.originalEvent.wheelDelta / 680 > 0) {
            $('#textbox').stop(true, false).animate({ /* 1) applied stop(true, false)*/
              'marginTop' : "+=50px" 
            }, 1000, function(){});
        }else {
            $('#textbox').stop(true, false).animate({ /* 2) applied stop(true, false)*/
              'marginTop' : "-=50px" 
            }, 1000, function(){}); 
        }

    });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="textbox"> SOME TEXT</p>
Mik
  • 124
  • 8
  • I didn't understand how to stop the effect. I'm not studing js and its syntax is very far to me.. Also I don't know why the img is zooming on scroll? :( – Simona Kraseva Apr 24 '17 at 00:47
  • Look at my answer to your code, before you start animation just add this part .stop(true, false).animation.... //// About image problem: 1) You are applying margin-top, on a div which has image. 2) You use flex, and because you apply margin-top, your div resizes. 3) Because you use background-size: cover, your image will try to get aspect ration, and thus will look like it's resizing. To fix resizing problem, you have to apply fixed height, or use padding-bottom technique from [this thread](http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Mik Apr 24 '17 at 06:49
  • Thank u very much for the help with the image! Now I'm with your code, but the effect bug is the same - it doesn't stop... – Simona Kraseva Apr 24 '17 at 08:52