How to merge two javascript codes into one?

Both scripts work separately but I’m trying to merge them into one. All my efforts didn’t work. It’s a simple script to hide the navbar on scroll-down, and show it up on scroll-up with a white background. But when the page is scrolled all the way up, I need the navbar background to become transparent.

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";  
  } else {
    document.getElementById("navbar").style.top = "-85px";
  }
    
  prevScrollpos = currentScrollPos;
}
</script>


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

function scrollFunction() {
  if (document.body.scrollTop > 85 || document.documentElement.scrollTop > 85) {
    document.getElementById("navbar").style.background = "#fff";
  } else {
    document.getElementById("navbar").style.background = "none";
  }
}
</script>

Answer

There are two ways to solve your problem:

Solution 1: Use window.addEventListener to avoid overriding window.onscroll property

This solution requires the least amount of effort, as it is simply switching out the method of listening to the scroll event. It is also helpful if both logic reside in separate files and you don’t want to combine them.

<script>
let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', () => {
    const currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar").style.top = "0";  
    } else {
        document.getElementById("navbar").style.top = "-85px";
    }

    prevScrollpos = currentScrollPos;
});
</script>


<script>
window.addEventListener('scroll', scrollFunction);

function scrollFunction() {
  if (document.body.scrollTop > 85 || document.documentElement.scrollTop > 85) {
    document.getElementById("navbar").style.background = "#fff";
  } else {
    document.getElementById("navbar").style.background = "none";
  }
}
</script>

Solution 2: Combine logic from both functions into one

This method moves all your scroll-related logic into a single event listener for the ease of maintenance. In this case, you can still use window.onscroll to assign the function, even though I would strongly encourage not to do so:

<script>
window.addEventListener('scroll', () => {
    navBarScrollFunction();
    scrollFunction();
});

let prevScrollpos = window.pageYOffset;
function navBarScrollFunction() {
    const currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar").style.top = "0";  
    } else {
        document.getElementById("navbar").style.top = "-85px";
    }

    prevScrollpos = currentScrollPos;
}

function scrollFunction() {
  if (document.body.scrollTop > 85 || document.documentElement.scrollTop > 85) {
    document.getElementById("navbar").style.background = "#fff";
  } else {
    document.getElementById("navbar").style.background = "none";
  }
}
</script>