jquery - Jqueryのアニメーション化とオフセットにより予期しない動作が発生する

Question

「メニュートリガー」をクリックすると次のことが発生する理由を理解しようと何時間も試みてきました

• 「コンテンツ」がトップ0の場合、「メニュートリガー」は意図したとおりに機能します（たとえば、ツリーメニューアイコンをクリックするとメニューが上下します）
• 「コンテンツ」をスクロールすると、「メニュートリガー」が機能しなくなります

何もスクロールしていないときに「メニュートリガー」が正常に機能するのに、「コンテンツ」ボックスをスクロールするとすぐに機能しなくなる理由を誰でも理解できますか。

最上位の要素は固定され、最上位 0 に設定されているため、影響を受けないはずです (私の理解では、これは明らかにここに欠けています (笑) JS/Jquery はまだ新しい)。

これが私が今持っているすべてのものとのフィドルです。

var topMenu = $('#topMenu');
var topMenuItem = $('#topMenu ul li a');
var top = $('#top');
var menuTrigger = $('.menu-trigger');
var time = 350;
var easing = 'easeOutCirc';

topMenu.css({
    'top': -(topMenu.outerHeight())
});

menuTrigger.on('click', function () {

    if (top.offset().top == 0) {

        top.animate({
            top: topMenu.outerHeight()
        },
        time,
        easing);

    } else {

        top.animate({
            top: 0
        },
        time,
        easing);
    };
});

topMenuItem.on('click', function () {

    if (topMenu.offset().top == 0) {

        top.animate({
            top: 0
        },
        time,
        easing);
    };
});