<style>
   @media (min-width: 992px) {
      .fixed-header { padding-top: 202px; }
      .fixed-header #header { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; border-bottom: 1px solid #e3e3e3; padding-bottom: 0 !important; margin-bottom: 0; }
      .fixed-header #header .site-name { padding-top: 0; padding-bottom: 0; position: absolute; left: 50%; top: 0;  transform: translateX(-50%); z-index: 8; }
      .fixed-header #header .site-name img { max-height: 50px; }
      .fixed-header #header .top-nav { padding-top: 0; }
   }
</style>

<script type="text/javascript">
   function fixedHeader() {
      var offsetTop = $(window).scrollTop();
      var fixedClass = 'fixed-header';
      var fixedElement = $('body');
      var fixedFrom = 0;
      var fixedTo = 20;

      if (offsetTop > fixedFrom) {
         fixedElement.addClass(fixedClass);
      }

      if (offsetTop < fixedTo) {
         fixedElement.removeClass(fixedClass);
      }
   }

   window.onscroll = function () {
      console.log($(window).scrollTop());
      fixedHeader()
   };
</script>