How to merge two javascript codes into one?-CodePudding

both scripts work separately, but I'm trying to merge them into one. All my efforts don't work. 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 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>

CodePudding user response：

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>

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

Solution 2: Combine logic from both functions into one

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