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

Question

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

$(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;
});

Answer 2

在这里再次拯救你的一天^^ 您可以做的是创建一个油门/去抖动包装器函数来侦听独特的自定义事件。像这样的：

/**
 * @description delay events with the same id, good for window resize events, keystroke, etc ...
 * @param {Function} func : callback function to be run when done
 * @param {Integer} wait : integer in milliseconds
 * @param {String} id : unique event id
 */
var delayedEvent = (function () {
    var timers = {};

    return function (func, wait, id) {
        wait = wait || 200;
        id = id || 'anonymous';

        if (timers[id]) {
            clearTimeout(timers[id]);
        }

        timers[id] = setTimeout(func, wait);
    };
})();

然后你可以像这样使用它：

delayedEvent(function(){/*your logic here*/}, 500, 'my scroll event');

See a working demo