jQuery：淡入固定導航當滾動過去某個點

Question

我想讓我的固定導航淡入，一旦我的內容區域從窗口頂部50px。我已經完成了它的工作，但是我在動畫中出現了一個奇怪的「反彈」。菜單完全出現，然後再次隱形並淡入。任何想法？這裏是我的代碼：

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