导航菜单滑入javascript延迟反应

Question

Web开发新手。当主菜单滚出视图时，我试图让辅助导航菜单从顶部向下滑动。我的代码有效，但滚动后需要几秒才能生效：I.e。向下滚动，等待5秒左右，然后触发不透明度变化。如果重要的话，我正在使用Shopify主题。

我哪里错了？

感谢。

HTML：

<header class "site-header"> ...

<div class = "header-popup">
    Hello World!
</div>

CSS：

.header-popup {
    background-color: #a37ee0;
    width: 100%;
    position: fixed;
    opacity: 0;
    top: 0;
    z-index: 999;
}

JavaScript的：

$(window).scroll( function(){
    var bottom_of_object = $('.site-header').offset().top + $('.site-header').outerHeight();
    var top_of_window = $(window).scrollTop();

    if ( ( bottom_of_object - top_of_window ) <= 0 ) {
        $('.header-popup').animate({'opacity':'100'},500); 
    }
    else {
        $('.header-popup').animate({'opacity':'0'},500); 
    }
});