jquery - jQuery：滚动过去某个点时，fadeIn 固定导航

Question

一旦我的内容区域距离窗口顶部 50 像素，我正试图让我的固定导航淡入。我已经让它工作了，但是我在动画中得到了一个奇怪的“反弹”。菜单完全出现，然后再次消失并淡入。有什么想法吗？这是我的代码：

$(window).bind('scroll',function() {
    var vPos = $(window).scrollTop(); //The current scroll bar position
    var totalH = $('.content').offset().top; // Distance content from top
    var finalSize = totalH - vPos; // Get the difference of the distances

    console.log(finalSize);

    if( finalSize <= 50 ) {
        $('.sticky').fadeIn(300);       
    } else {
        $('.sticky').fadeOut(300);  
    }
});

可以在这里看到：http: //portfolio.stvartak.net/redesign

谢谢！

Answer 1

看起来你需要一个标志来避免多次执行褪色的东西：

var flag=true;

$(window).on('scroll',function() {
    var vPos = $(window).scrollTop(),
        totalH = $('.content').offset().top,
        finalSize = totalH - vPos;

    if( finalSize <= 50)
        if (flag) $('.sticky').fadeIn(300);
        flag=false;
    } else {
        if (!flag) $('.sticky').fadeOut(300);  
        flag=true;
    }
});

Answer 2

尝试这个：

$(window).bind('scroll',function() {
    var vPos = $(this).scrollTop(); 
    var totalH = $('.content').offset().top;     
    if( totalH <= vPos ) {
        $('.sticky').stop().fadeIn(300);       
    } else {
        $('.sticky').stop().fadeOut(300);  
    }
});