How to make the top smoothly apply when scrolling down? now it's delayed. The logic is as follows: when scrolling 1px, the block moves down 10px.

When scrolling 1px, the .q2 block is shifted by 10px. That is, when scrolling by 4 px, the .q2 block is shifted by 40px

$(window).scroll(function(){ if($(window).scrollTop() > $(window).scrollTop()-1){ $('.q2').animate({ top: "+=10" });} }); 
 body{ height: 1000px; } .q1{ height: 200px; border: 1px black solid; position: relative; } .q2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: gray; transition: all 1s; overflow: hidden; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="q1"> <div class="q2">465645<br> 465645<br> 465645<br> 465645<br> 465645<br> 465645<br> 465645<br> 465645<br> 465645<br> <span>465645</span><br> </div> </div>

  • one
    What is this comparison? if($(window).scrollTop() > $(window).scrollTop()-1) - Raz Galstyan
  • @Razmik Galstyan Well, if down by 1 pixel then ... - Artem PeGaS
  • you seem to be doing the following, which will always give the correct result - if(x > x-1) - Raz Galstyan
  • @Razmik Galstyan Well this is understandable, just the point is to have a smooth transition. And then I'll fix all the nuances - Artem PeGaS
  • @ArtyomPeGaS your "condition" is always fulfilled, so there is no point in it - br3t

1 answer 1

 $(window).on('mousewheel DOMMouseScroll MozMousePixelScroll',function(event){ delta = parseInt(event.originalEvent.wheelDelta || -event.originalEvent.detail); if(delta < 0){ $('.q2').animate({ top: parseInt($('.q2').css('top'))+10+'px' },10); } }); 
 body{ height: 1000px; } .q1{ height: 200px; border: 1px black solid; position: relative; } .q2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: gray; transition: all 1s; overflow: hidden; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="q1"> <div class="q2">465645<br> 465645<br> 465645<br> 465645<br> 465645<br> 465645<br> 465645<br> 465645<br> 465645<br> <span>465645</span><br> </div> </div>

Here is an example of the implementation of animation, we expect to scroll up or down, and if down we are doing the animation.