基于滚动的动画侧面板菜单与标题动画菜单冲突

Question

我有一个左侧面板菜单，可以通过单击汉堡包导航图标在屏幕上显示动画。导航图标在显示汉堡包图标和X图标的打开和关闭状态之间切换。还有一个顶部标题菜单，当滚动到某个div时会下降，当滚动到顶部时再次动画。当左侧菜单显示在屏幕上时标题菜单下降时，左侧菜单会在屏幕上显示动画，导航图标将重置。这一切都非常好，但是当再次滚动到顶部后，您必须单击导航图标几次以使左侧面板再次激活到屏幕。滚动到顶部后，左侧菜单出现错误的原因是什么？

// left panel animation
$('#nav-icon').click(function() {

$(this).toggleClass('open close');

if ($('#nav-icon').hasClass("open")) {

    $(".mobile" ).animate({"left":"0px"}, 200);

}

if ($('#nav-icon').hasClass("close")) {

$(".mobile" ).animate({"left":"-260px"}, 200);                                                                                                      
}

});



// top menu scroll animation
   $(window).on('resize load', function(){  

  if ( $(window).width() > 1024) {

    $('header').addClass('navDropDown');


    var statment = $('.homeStatement').offset();

    $(window).scroll(function() {

        if ($(window).scrollTop() > statment.top - 200){                                                                        
            $('.navDropDown').stop().animate({ 'top': '0px' }, 75);
            $(".mobile" ).animate({"left":"-260px"}, 200); 
            $('#nav-icon').removeClass('open').addClass('close');                                   
        }

        if ($(window).scrollTop() < statment.top - 200){                                
            $('.navDropDown').stop().animate({ 'top': '-70px' }, 75);                           
        }


    }); 

}                               

});