0

我只是想在用户向下滚动时在滚动时淡入一个元素（#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;
4

2 回答 2

1

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

$(document).ready(function() {
    $(window).scroll( function(){
        if($(window).scrollTop()>0){
            $("#topNav").fadeIn();
        }
        else{
            $("#topNav").fadeOut();
        }
    });
});
于 2013-04-11T06:39:58.713 回答
1

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

//some code required by SO

于 2013-04-10T05:03:27.083 回答