Jquery animate and offset causing unexpected behavior

Jquery animate and offset causing unexpected behavior

I've been trying for hours to understand why the following occurs when I
click the "menu trigger"
The "menu trigger" works as intended (e.g. clicking the tree menu icon
makes the menu go up and down) when the "content" is top 0
When I scroll the "content" the "menu trigger" stops working
Can anybody help me understand why the "menu trigger" works fine when
nothing is scrolled, but stops working as soon as I scroll the "content"
box.
The top element is fixed and set to top 0, so it shouldn't be affected (to
my understanding. Which obviously is lacking here haha. Still new to
JS/Jquery).
Here is a fiddle with everything I have now.
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);
};
});