Анимированный липкий заголовок после определенной точки прокрутки

Question

Я хотел бы сделать мою навигацию анимированной и липкой после прохождения точки прокрутки 300 пикселей. Мой текущий код ниже. Заранее спасибо.

Jquery

    stickyHeader: function () {
  window.addEventListener('scroll', function () {
    var windowTop = window.pageYOffset;
    var headerNavElement = document.querySelector('.site-header-nav-wrapper');
    if (windowTop > 0) {
      headerNavElement.classList.add('sticky');
    } else {
      headerNavElement.classList.remove('sticky');
    }
  });
},

CSS

body {
    margin: 0;
    padding: 0;
    @include font_roboto_400(16px, 2.0);
}

.site-header-nav-wrapper {
  @media (min-width: 1024px) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: background-color 0.3s ease;

    &.sticky {
      background-color: $color_primary;
      //box-shadow: 0 0 4px 2px rgba(#000, 0.2);
    }
  }
}