Эффекты перехода для закрепленного заголовка с фиксированным положением

Question

У меня есть заголовок, который принимает "липкий" класс при прокрутке окна на JS, размеры заголовка отличаются на липком, потому что некоторые элементы отображаются в исходном заголовке и скрыты в липком заголовке, но это тот же самый элемент, который отображается.

Я пытался сделать переход плавным и красивым, поэтому я хотел добавить некоторые ( Fade-in ) и ( Fade-out ) переходы, I был в состоянии добавить постепенное добавление, добавив эффект перехода к background-color, например:

 transition: background-color 800ms linear; 

Но это не относится к исчезновению, так как я хочу, чтобы стилизация липкого заголовка исчезла плавно, в то время как оригинальный заголовок (который является тем же элементом) должен отображаться вместо этого, так что все, что я пытался скрывать заголовок вообще при исчезновении, все вопросы и поиск в Google, я обнаружил, что все они имеют одинаковые размеры заголовка и просто уменьшить непрозрачность, или у них есть два элемента заголовка, оригинальный заголовок и один, который берет липкий стиль и просто скрывает липкий, используя:

$(header).fadeOut(800);

В моем случае, это тот же элемент, который я хочу скрыть , но я должен сделать это гладко, что я могу сделать?

HTML:

<div class="main">

  <div class="header">
    Test Header
    <div class="showOnSticky">
      <p>
        Stricky Header
      </p>
      <p>
        Stricky Header
      </p>
    </div>

    <div class="dontShowOnSticky">
      <p>Don't display me on sticky header</p>
      <p>
        Test
      </p>
      <p>
        Test
      </p>
    </div>
  </div>

  <div class="contents">
    Test some other elements

    <div>
some content .....
</div> 

</div>

CSS код:

.header {
  background-color: #eeeeee;
  transition: background-color 2s linear;
}

.header.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: yellow;
  transition: background-color 2s linear;
}

.header.sticky .dontShowOnSticky {
  display: none;
}

.header.sticky + div {
  padding-top: 310px;
}

.contents {
  background-color: blue;
  color: white;

}

JS:

$(document).ready(function() {
  var header = document.querySelector(".main .header");
  var header_scroll_top = header.offsetTop + header.clientHeight;

  $(window).scroll(function() {

    if (header) {
      var window_scroll_top = window.pageYOffset || document.documentElement.scrollTop;

      if (window_scroll_top > header_scroll_top && !header.classList.contains("sticky")) {
        header.classList.add("sticky");
      } else if (window_scroll_top < header_scroll_top && header.classList.contains("sticky")) {
        header.classList.remove("sticky");
      }
    }
  });
});

Вот демонстрационная версия для моего кода:

https://jsfiddle.net/k3g2y9z7/