Прокрутка назад вверх противоположно

Question

Когда я прокручиваю свои функции, работаю так же, как и у них. Но я хочу, чтобы они делали наоборот, когда прокручивали назад. Но как? Это то, что я получил:

var $document = $(document) 


$document.scroll(function() { 
     if ($document.scrollTop() >= 50) { 
      AnimateFunction(); 
     } 
}); 

function AnimateFunction() { 
    setTimeout(function() { 
    $("#LOGO").animate({height: '180px'}, 1); 
     $("ul").animate({top: '-14px'}, 1); 
     $("li").animate({fontSize: '8pt'}, 1); 
     $("#HB").animate({marginTop: '-10px'}, 1); 
     $("#HB").animate({height: '29px'}, 1).animate({width: '26px'}, 1); 
     } 
    )}; 

Я надеюсь, что кто-то может мне помочь!

Answer 1

Для этого вам нужно сделать несколько вещей

До сих пор, вы только обнаруживая свиток на документе и на основе позиции прокрутки выполняющиеся функцию.

1. Теперь, вы должны были бы обнаружить не только прокрутки, но и направление прокрутки see this

2. вам придется написать еще одну функцию, которая Отменяет изменения, которые вы сделали в вашей функции AnimateFunction и вызвать его, когда направление прокрутки вверх. В вашей новой функции вы сбросите значения. то есть

   $ ("# LOGO"). animate ({height: 'originalHeight'}, 1);

Пример кода

var lastScrollTop = 0; 
$(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
     AnimateFunction() 
    } else { 
     AnimateFunctionReverse() 
    } 
    lastScrollTop = st; 
});