Question

我在向下滚动时使用此功能隐藏header，向上滚动时再次显示

$(function(){
    var lastScrollTop = 0, delta = 5;
    $('.item').scroll(function() {
        var nowScrollTop = $(this).scrollTop();
        if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
            if (nowScrollTop > lastScrollTop){
                $('header').fadeTo(0,0); // scrolling down
            } else {
                $('header').fadeTo(0,1); // scrolling up
            }
            lastScrollTop = nowScrollTop;
        }
    });
});

此外，当光标位于页面的前200px时，我使用此功能显示标题：

$(window).on('mousemove', function(e) {
    if ( e.pageY < 200 ) {
        $('header').fadeTo(0,1);
    }
});

问题在于，当我滚动鼠标位于窗口的前200px时，两个功能发生冲突，并且标题在显示和隐藏之间保持切换。

现在，我已经在其他地方读过，我需要在滚动时取消绑定并绑定鼠标移动。但我不知道该怎么做。

编辑：

这是指向jsfiddle的链接：https://jsfiddle.net/zrmg646L/

编辑2：

这里是jsfiddle的链接，其中包含解决方案：http://jsfiddle.net/zrmg646L/3/

Answer 1

试试这个。取消绑定鼠标滚动并在不滚动250ms

后重新绑定它

 function fadeHeader(e) {
       if ( e.pageY < 200 ) {
             $('header').fadeTo(0,1);
           }
  }

$(function(){
         $(window).mousemove(fadeHeader);
         var lastScrollTop = 0, delta = 5;
         $('.item').scroll(function() {
            $(window).unbind('mousemove', fadeHeader);
            clearTimeout($.data(this, 'scrollTimer'));
            $.data(this, 'scrollTimer', setTimeout(function() {
                     $(window).mousemove(fadeHeader);
            }, 250));

        var nowScrollTop = $(this).scrollTop();
        if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
            if (nowScrollTop > lastScrollTop){
                $('header').fadeTo(0,0);                    
            } else {
                $('header').fadeTo(0,1); // scrolling up
            }
            lastScrollTop = nowScrollTop;
        }
    });
});

jquery scroll（）和on（mousemove）搞乱了

1 个答案: