This content originally appeared on DEV Community and was authored by Igor Lerinc
How TO - Slide Down a Bar on Scroll
Javascript
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 = "-50px";
}
prevScrollPos = currentScrollPos;
}
+++++
var prevScrollPos = window.pageYOffset;
Here, we declare a variable prevScrollPos and assign it the initial value of the current vertical scroll position (window.pageYOffset). This variable will be used to keep track of the previous scroll position.
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollPos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollPos = currentScrollPos;
}
This code sets up an event handler (window.onscroll) that is triggered whenever the user scrolls the page. The function assigned to window.onscroll is an anonymous function (a function without a name) that performs the following steps:
It retrieves the current vertical scroll position (window.pageYOffset) and assigns it to the variable currentScrollPos.
It compares the previous scroll position (prevScrollPos) with the current scroll position (currentScrollPos). If the previous scroll position is greater than the current scroll position, it means the user is scrolling up.
If the user is scrolling up, it sets the top style property of the element with the ID "navbar" to "0", effectively showing the navbar.
If the user is scrolling down, it sets the top style property of the element with the ID "navbar" to "-50px", effectively collapsing and hiding the navbar.
Finally, it updates the previous scroll position (prevScrollPos) to the current scroll position (currentScrollPos) to prepare for the next scroll event.
CSS
#navbar {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
- znači
topje ovde suština.topje distance from the top edge of an element's containing block. In the context of the navbar styling, the top property is used to control the vertical position of the navbar. I on se sakrije, tako što ide u minus (-50px), i tako se sakrije. I još efekat tranzicije ima.
Sa JS, on ustvari samo menja property jednog style-a ! I u sami CSS imaš vreme tranzicije.
-
transitionproperty is used to apply a smooth transition effect when a CSS property changes its value. It allows you to control the duration and timing function of the transition. In the case of transition:top 0.3s;, it means that any change in the top property of the element will be transitioned over a duration of 0.3 seconds.
HTML
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
This content originally appeared on DEV Community and was authored by Igor Lerinc
Igor Lerinc | Sciencx (2023-05-19T13:13:31+00:00) Hide Menu on Scroll. Retrieved from https://www.scien.cx/2023/05/19/hide-menu-on-scroll/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.