I’m Trying to make a Header that hides when you scroll down and shows (with another color) when scroll up, and return to default color once in top of the page.
It works on most browsers, but in safari it just does nothing, the header disappears once you scroll down, but after that it doesn’t appear ever again.

Jquery

<script>
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("hide-header").classList.remove("hide");
        document.getElementById("hide-header").classList.add("show");
        document.getElementById("hide-header").style.background = "#FCFAF7D9";
    } else {
        document.getElementById("hide-header").classList.remove("show");
        document.getElementById("hide-header").classList.add("hide");
    }
    
    if (currentScrollPos == 0) {
        document.getElementById("hide-header").style.background = "#FFFFFF";
    }
    
    prevScrollpos = currentScrollPos;
}
</script>

CSS

<style>
/* Show Hide Sticky Header Speed Control */
.header {
    transition: top .4s ease;
    position: fixed;
    top: 0;
    width: 100%;
}

.hide {
    top: -150px; /* adjust this value to the height of your header */
}

.show {
    top: 0;
}
</style>

I’m Trying to make a Header that hides when you scroll down and shows (with another color) when scroll up, and return to default color once in top of the page.