如何为Bootstrap的Affix添加“淡出”效果？

Question

当用户到达特定点时，我正在使用Bootstrap V.3的词缀显示导航。 淡入效果很容易通过CSS3与

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

为了在向上滚动时淡出，我尝试计算高度并使用以下代码自行完成

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

问题在于这完全弄乱了导航。 直到我再次向上滚动为止。 如果我使用与词缀偏移量相同的计算，则它不会完全消失，但会按照Bootstrap的要求将其删除。 另一方面，以下内容也不起作用：

$(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');
    }
  }; 
});

感谢您的帮助和想法，以解决它:)

亲切的问候

Answer 1

检查此代码。 这可能会有所帮助。

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