How can I add a “fade out” effect to Bootstrap's Affix?

Question

I'm using Bootstrap V.3's affix to show up my navigation when the user reached a certain point. The fade in effect was quite easy to achieve through CSS3 with

.affix {
  background-color: green;
  -webkit-transition: background-color 2s; /* Safari */
  transition: background-color 2s;
}

To fade out when scrolling back up, I tried calculating the height and do it by myself with following code

$(window).scroll(function() {
  if ($(window).scrollTop() < ... ) { 
    if ($('#navigation').hasClass('affix')){
      $('#navigation').fadeOut();
    }
  }; 
});

The Problem is that this completely messes up the navigation. It works until I scroll up again. If I use the same calculation as for the affixes' offset, it wont fade out at all, but removes it as it is supposed to by Bootstrap. On the other hand, the following isn't working as well:

$(window).scroll(function() {
  if ($(window).scrollTop() < ... ) { 
    if ($('#navigation').hasClass('affix')){
      $('#navigation').fadeOut("fast", function(){
        $('#navigation').removeClass('affix');
        $('#navigation li a').css("display", "initial");
      });
    }
  } else {
    if (!$('#navigation').hasClass('affix')){
      $('#navigation').addClass('affix');
    }
  }; 
});

Thanks for your help and ideas how to solve it :)

Kind Regards

Answer 1

Check this code out. It might help.

window.addEventListener("scroll", function() {
    if (window.scrollY > 400) {
        $('.navbar').fadeOut();
    }
    else {
        $('.navbar').fadeIn();
    }
},false);