每次滚动位置更改时都会触发 Jquery 脚本

Question

此代码旨在使框在更改文本之前缩小，并具有淡入/淡出效果。唯一的问题是，它总是在滚动位置改变时触发。例如，假设滚动位置为 100 像素，然后用户再次向下滚动，您会看到文本(在 li.um 内)淡入然后淡出。有没有办法阻止代码一直运行，并且只有当滚动位置从 >60 变为 <60 时，反之亦然？代码 + fiddle :

$(window).bind('scroll', function() {
    var viewportWidth = $(window).width();
     if ($(window).scrollTop() > 60) {
        $("li.um").fadeOut(200);
        $("ul.undermenu").stop(true, false).animate({width:'160px'}, { duration: 500, queue: true});
        $("ul.undermenu").animate({height:'60px'}, { duration: 200, queue: true});
        window.setTimeout(function () {
        $('li.um').html('12345678901 pete@rufusmusic.co.uk');
        }, 700);
        $("li.um").fadeIn(200);
     }

     else {
         $("li.um").fadeOut(200);
         $("ul.undermenu").stop(true, false).animate({height:'30px'}, { duration: 200, queue: true});
         $("ul.undermenu").animate({width:viewportWidth}, { duration: 500,  queue: true});
         window.setTimeout(function () {
         $('li.um').html('Email: pete@rufusmusic.co.uk | Call: 12345678901 | Call: 01290923876');
         }, 700);
         $("li.um").fadeIn(200);
     }
});

Fiddle(向下滚动几次以了解我对文本淡入/淡出的意思)

Answer 1

您需要跟踪之前的位置，以便知道是否应该触发它。这是使用现有代码的可能实现:

var previousScrollTop = 0;
$(window).bind('scroll', function() {
    var viewportWidth = $(window).width(),
        scrollTop = $(window).scrollTop();
    if (scrollTop > 60) {
       if(previousScrollTop <= 60) {
            $("li.um").fadeOut(200);
            $("ul.undermenu").stop(true, false).animate({width:'160px'}, { duration: 500, queue: true});
            $("ul.undermenu").animate({height:'60px'}, { duration: 200, queue: true});
            window.setTimeout(function () {
            $('li.um').html('12345678901 pete@rufusmusic.co.uk');
            }, 700);
            $("li.um").fadeIn(200);
        }
     } else if (previousScrollTop > 60) {
        $("li.um").fadeOut(200);
        $("ul.undermenu").stop(true, false).animate({height:'30px'}, { duration: 200, queue: true});
        $("ul.undermenu").animate({width:viewportWidth}, { duration: 500,  queue: true});
        window.setTimeout(function () {
            $('li.um').html('Email: pete@rufusmusic.co.uk | Call: 12345678901 | Call: 01290923876');
          }, 700);
        $("li.um").fadeIn(200);
     }
     previousScrollTop = scrollTop;
});