Question

当用户向下滚动时，我只是试图在滚动时淡入元素（#topNav），然后当用户向上滚动并点击scrollTop时淡出它。向下滚动淡入;向上滚动淡出。

但是，两个方向都在消退？

我做错了什么？

function scrollFunc(e) {
    if ( typeof scrollFunc.x == 'undefined' ) {
        scrollFunc.x=window.pageXOffset;
        scrollFunc.y=window.pageYOffset;
    }
    var diffX=scrollFunc.x-window.pageXOffset;
    var diffY=scrollFunc.y-window.pageYOffset;

    if(diffX<0){
        // Scroll right
    }
    else if(diffX>0){
        // Scroll left
    }
    else if(diffY<0){
                    // scroll down
        $('#topNav').fadeIn();
    }
    else if(diffY>0){
        // Scroll up
        if(document.body.scrollTop === 0){
                            //reached top
            $('#topNav').fadeOut();
        }
    }
    else{
        // First scroll event
        $('#topNav').css('position','fixed').show().fadeIn();
    }
    scrollFunc.x=window.pageXOffset;
    scrollFunc.y=window.pageYOffset;
}
window.onscroll=scrollFunc;

Answer 1

我在jsfiddle尝试了您的代码并且它有效，所以我猜它可能是一个版本问题你的jQuery版本和浏览器是什么？

//some code required by SO

Answer 2

我解决了这个问题，因为我试图实现同样的目标。但这取决于jQuery。我假设您在使用淡入淡出函数时已经链接了jQuery。

$(document).ready(function() {
    $(window).scroll( function(){
        if($(window).scrollTop()>0){
            $("#topNav").fadeIn();
        }
        else{
            $("#topNav").fadeOut();
        }
    });
});

.fadeOut（）表现得像.fadeIn（）

2 个答案: