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);

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

1 个答案: