jquery: animate down navigation, not sliding back up/working properly

Question

Hey so i was trying to get my navigation to animate down after a certain div has passed but its not working properly. not sure why. it works when sliding down although a bit buggy(sometimes there seems to be a delay before it slides down and other times it slides down properly immediately). It also does not slide up it justs removes it self. what am i doing wrong?

here is my code:

$(window).scroll(function () {
    targetScroll = $('#scroll_verder').position().top,
    currentScroll = $('html').scrollTop() || $('body').scrollTop();
if(currentScroll>=targetScroll){
    $('.navbar').addClass('show-menu').animate({ top: '0px' });
}

else {
    $('.navbar').stop();
    $('.navbar').removeClass('show-menu');
    $('.navbar').animate({ top: '-50px' });
}
});

Answer 1

Had a look at your code on the link you posted. This should do the trick:

var reachedTarget = false; // Prevent animation collisions with this
var targetScroll = $('#scroll_verder').position().top;
$(window).scroll(function () {
  var currentScroll = $('html').scrollTop() || $('body').scrollTop();
  if ( currentScroll >= targetScroll ) {
    if ( !reachedTarget ) {
      $('.navbar').stop();
      $('.navbar').addClass('show-menu').animate({ top: '0px' });
    }
    reachedTarget = true;
  } else{
    if ( reachedTarget ) {
      $('.navbar').stop();
      $('.navbar').removeClass('show-menu').animate({ top: '-50px' });
    }
    reachedTarget = false;
  }
});

EDIT: In CSS (to make sure initial position is correct):

.navbar.show-menu {
  z-index: 999;
  display: block;
  top : -50px;
}