Change Header on Scroll

For sites with new top mobile bar

<style>
nav {
position: fixed!important;
width: 100%;
z-index: 999;
}

nav, nav .navbar-header, nav .navbar-nav, .siteLogo, .navbar .nav > li > a {
transition: all ease .7s;
}

nav.active {
background: #000;
}

nav.active .navbar-header, nav.active .navbar-nav {
transform: scale(.7);
}

nav.active .siteLogo {
padding: 0;
}

nav.active .navbar .nav > li > a {
font-size: 12px;
}

#mainContent {
padding-top: 120px;
}

#editLinks {
z-index: 9999;
}

.ui-front {
z-index: 9999!important;
}

@media screen and (max-width: 767px) {
nav {
margin-top: 45px;
}

#mainContent, #mainContentSection {
padding-top: 145px;
}
}

</style>

<script>
window.onscroll = function() {scrollFunction()};

$(function() {
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$("nav").addClass("active");
} else {
//remove the background property so it comes transparent again (defined in your css)
$("nav").removeClass("active");
}
});
});
</script>