My navbar hides when scrolling down by 96px because that’s its height on large screens.
Scrolling up causes the navbar to return.
However, the navbar height will change at different breakpoints and I will have to modify the script.
The problem is that I don’t know javascript, jquery or any other programming language at all. I copied the script and only changed the number of pixels in it. Could someone write me a ready-made script to change the value?
I’m creating a website for the company I work for and I really need it. I would be very grateful!
<code>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 = "-96px";
}
prevScrollpos = currentScrollPos;
}
</code>
<code>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 = "-96px";
}
prevScrollpos = currentScrollPos;
}
</code>
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 = "-96px";
}
prevScrollpos = currentScrollPos;
}
I looked at this page:
https://www.w3schools.com/howto/howto_js_media_queries.asp
But I won’t get anything out of it because, as I wrote earlier, I don’t know anything about programming
New contributor
6ytu57 6ytu57 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I thinks this will do :
<code>var prevScrollpos = window.pageYOffset;
const navbar = document.getElementById("navbar");
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = `-${navbar.offsetHeight}px`;
}
prevScrollpos = currentScrollPos;
}
</code>
<code>var prevScrollpos = window.pageYOffset;
const navbar = document.getElementById("navbar");
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = `-${navbar.offsetHeight}px`;
}
prevScrollpos = currentScrollPos;
}
</code>
var prevScrollpos = window.pageYOffset;
const navbar = document.getElementById("navbar");
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = `-${navbar.offsetHeight}px`;
}
prevScrollpos = currentScrollPos;
}
It stores the navbar in a variable to avoid getting it everytime, and sets the height to the rendered height of the navbar.