如何為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);