Question

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

这里再次保存你的一天^^ 你可以做的是创建一个监听独特自定义事件的油门/去抖包装函数。像这样：

/**
 * @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

Answer 2

您需要跟踪您之前的位置，以便了解是否应该触发它。以下是使用现有代码的可能实现：

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

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

2 个答案: