! Sticky header Tango !

<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>