Элемент перемещается по прокрутке JQuery

Question

У меня проблема с перемещением элемента по событию прокрутки. Проблема: Я прокручиваю страницу и добавляю 1px к верхнему значению css (каждый прокрутка). После этого я прокручиваю страницу вниз и удаляю 1px из верхнего значения css. Я думаю, что он вернет свое первоначальное положение, но нет. Вот мой код:

var lastScroll = $(window).scrollTop(); 

$(window).scroll(function(env) { 

var scroll = $(this).scrollTop(); 

if (scroll > lastScroll){ 
    console.log('Scroll down'); 
    $('#home>article').css({ 
     top: "+="+1+"px" 
    });             
} else { 
    console.log('Scroll up'); 
    $('#home>article').css({ 
     top: "-="+1+"px" 
}); 

lastScroll = scroll; 

}); 

Благодарим за идею!

Answer 1

, когда событие прокрутки срабатывает, это не гарантированно срабатывает один раз для каждого прокручиваемого пикселя. Он может срабатывать после того, как вы прокрутите 10 пикселей один раз, а затем 2 пикселя. Вы должны отслеживать дельту (change) scrollTop от последнего вызова обработчику.

Answer 2

Надеюсь, это поможет, это то, что я использовал некоторое время назад. То, что я использовал:

<script type="text/javascript">// <![CDATA[ 
$(window).scroll(function() { 
      var ttop = $('.container').position().top; 
      var hcltb = $('.container').height(); 
      var mtop = $(window).scrollTop(); 
      if (mtop > ttop) { 
       if (mtop < (ttop + hcltb - 400)) { 
        $('.internal_prev').css('top', (mtop - ttop + 300)); 
        $('.internal_next').css('top', (mtop - ttop + 300)); 
        $('.internal_commands').css('top', (mtop - ttop + 300)); 
       } 
      } 
     }); 
// ]]></script> 

Это приведет к тому, Div класс = «контейнер», чтобы действовать в качестве основного контейнера. После этого внутренние классы * будут прокручиваться вверх и вниз внутри div с заданным внутренним отступом 400.

Это не идеально, но здесь вы идете.