javascript - 如何添加 fadeIn 效果或过渡到 scrolltop 菜单？

Question

我的目标是在scrolltop menu中做一个非常好的过渡效果。现在我向下滚动的时候，动画是不参与的，我尝试自己做，但是没有成功。请帮我做这件事。

这是我的代码:

$(window).scroll(function() {
  if ($(this).scrollTop() > 10) {
    $('nav').addClass("scroll-down").fadeIn('fast');
    $('.header-container').hide();
  } else {
    $('nav').removeClass("scroll-down").fadeIn('fast');
    $('.header-container').show();
  }
});

nav {
  position: fixed!important;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  z-index: 9999;
}

nav.scroll-down {
  transition: all 0.4s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-common">
  <div class="container">
    <div class="row">
      <ul class="nav">
        <li class="first active"><a href="/">Главная</a></li>
        <li><a href="produkcziya">Продукция</a></li>
        <li><a href="o-kompanii">О компании</a></li>
        <li class="dropdown">
          <a href="infoblok" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Инфоблок</a>
          <ul class='dropdown-menu'>
            <li class="first"><a href="infoblok/novosti">Новости</a></li>
            <li class="last"><a href="infoblok/stati">Статьи</a></li>
          </ul>
        </li>
        <li><a href="oplata-i-dostavka">Оплата и доставка</a></li>
        <li><a href="kontaktyi">Контакты</a></li>
        <li class="last"><a href="postavshhikam">Поставщикам</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

试试这个，我还没有测试过，但这是我一直在做的

  $(window).scroll(function() {
   if ($(this).scrollTop() > 10) {
     $('nav').fadeIn(300, function() { 
      $(this).addClass("scroll-down");
      $('.header-container').hide();
     });
   } else {
     $('nav').fadeOut(300, function() { 
       $(this).removeClass("scroll-down");
       $('.header-container').show();
     });
   }
  });