Как сделать плавное появление фиксированной шапки?

var intro__suptitle = document.querySelector(".intro__suptitle");
var text = document.querySelector(".text");

var textCont = text.textContent;
text.style.display = "none";

for (var i = 0; i < textCont.length; i++) {
  (function(i) {
    setTimeout(function() {
      // Created textNode to append
      var texts = document.createTextNode(textCont[i])
      var span = document.createElement('span');
      span.appendChild(texts);

      span.classList.add("wave");
      intro__suptitle.appendChild(span);

    }, 100 * i);
  }(i));
}

$(function() {

//  Fixed Haeder

  let header = $("#header");
  let intro = $("#intro");
  let introH = intro.innerHeight();
  let scrollPos = $(window).scrollTop();
  let nav = $("#nav");
  let navToggle = $("#navToggle");

  checkScroll(scrollPos, introH);

  $(window).on("scroll resize", function() {

    let introH = intro.innerHeight();
    scrollPos = $(this).scrollTop();

    checkScroll(scrollPos, introH);
  });

  function checkScroll(scrollPos, introH) {
    if(scrollPos < introH) {
      header.addClass("fixed");
    } else {
      header.removeClass("fixed");
    }
  }