動畫導航滾動時通過一個點

Question

我想動畫（從頂部滑入）我的導航菜單，它是由scroll（）函數觸發的。如果用戶滾動通過40，導航菜單需要動畫。當用戶滾動小於40時，導航菜單必須再次動畫（向後滑動）。

它可以在下面的jsFiddle中使用代碼，但是當用戶從40以上滾動到底部時，每次滾動導航菜單時都會調用該函數，導致導航菜單非常緩慢且不流暢地滑下。

有人知道如何解決這個使用另一個函數，然後滾動（）？謝謝！

這裏是jsFiddle以下是jQuery代碼。

$(document).ready(function() { 

    /** HIDE MENU **/ 
    $(".menu").css("margin-top", "-88px"); 

    $(window).scroll(function() { 

     var verschil = ($(window).scrollTop()/5); 

     if (verschil > 40) 
     $('.menu').animate({'margin-top': '0px' }, {duration: 500, queue: false}); 

     else if (verschil < 40) 
     $('.menu').animate({'margin-top': '-88px' }, {duration: 500, queue: false}); 
    }); 

}); 

Answer 1

嘗試增加這2個控制變量：

$(document).ready(function() { 

    /** HIDE MENU **/ 
    $(".menu").css("margin-top", "-88px"); 
    var mustSlideDown = true; 
    var mustSlideUp = false; 
    $(window).scroll(function() { 

     var verschil = ($(window).scrollTop()/5); 

     if (verschil > 40 && mustSlideDown) { 

      $('.menu').animate({'margin-top': '0px' }, {duration: 500, queue: false}); 
      mustSlideDown = false; 
      mustSlideUp = true; 
     } 
     else if (verschil < 40 && mustSlideUp) { 

      $('.menu').animate({'margin-top': '-88px' }, {duration: 500, queue: false}); 
      mustSlideUp = false; 
      mustSlideDown = true; 
     } 
    }); 

});