I need to set three different background on a navbar:
1. No background if the page is less than 400 px of scrolling
2. Two different colors if the scroll of the page is more than 400 px: a) blue when I scroll down b) green when I scroll up.
I've tried to use the following code, but it seems like after I enter in the first IF, the function continue to work even if the page is less than 400px.
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("nav1").style.background = "rgba(0, 41, 51,1)";
} else {
lastScroll = currentScroll;
document.getElementById("nav1").style.background = "rgba(68,78,36,1)";
}
prevScrollpos = currentScrollPos;
} else {
document.getElementById("nav1").style.background = "rgba(0,0,0,0)";
}
}
Thanks!
You can use this script:
<script>
window.onscroll = function () { myFunction() };
function myFunction() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
var lastScrollTop = 0;
window.addEventListener("scroll", function () {
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop) {
document.getElementById("nav").style.background = "rgba(0, 41, 51,1)";
} else {
document.getElementById("nav").style.background = "rgba(68,78,36,1)";
}
lastScrollTop = st <= 0 ? 0 : st;
}, false);
} else {
document.getElementById("nav").style.background = "rgba(0,0,0,0)";
}
}
</script>
Do not attempt to assign two functions to window.onscroll, which is a property and can hold only one function.
Here is what is going on with your current code:
scrollFunction) and assigned to window.onscrollscrollFunction is called. If the page has not scrolled yet beyond 400px, the if block is not executed.prevScrollpos is declared... Then the function previously assigned to window.onscroll is overwriten with a new one.That is why the comparison for 400px isn't done after that. It is out of that second function. The first one got lost in the nothingness.
Here is what you want to achieve:
// This variable needs to be global
let prevScrollpos = 0;
// This getElement can also be global
let nav1 = document.getElementById("nav1")
function scrollFunction() {
// This varable needs to be local
let currentScrollPos = window.pageYOffset;
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
// Determine scroll direction
if (prevScrollpos > currentScrollPos) {
nav1.style.background = "rgba(0, 41, 51,1)";
} else {
nav1.style.background = "rgba(68,78,36,1)";
}
}
// If below 400px
else {
nav1.style.background = "rgba(0,0,0,0)";
}
// Update this variable for the next iteration
prevScrollpos = currentScrollPos;
// For this demo only
console.clear()
console.log(currentScrollPos)
}
// Assign the scrollFunction reference to the window property
window.onscroll = scrollFunction;body {
height: 1000px;
}
#nav1{
position: sticky;
top: 4px;
height: 100px;
border: 1px solid black;
}<div id="nav1"></div>