-
-
Save jasubal/5e8fd6f7a5414540ad3c486d69afd67d to your computer and use it in GitHub Desktop.
| let lastScrollTop = 0; | |
| const $html = document.documentElement; | |
| $html.classList.add('near-top'); | |
| window.addEventListener('scroll', () => { | |
| const currentScrollTop = window.scrollY || document.documentElement.scrollTop; | |
| // Determine scroll direction and update classes using ternary expressions | |
| currentScrollTop > lastScrollTop ? | |
| ($html.classList.add('scrolling-down'), $html.classList.remove('scrolling-up')) : | |
| ($html.classList.add('scrolling-up'), $html.classList.remove('scrolling-down')); | |
| // Add or remove class based on scroll position using a ternary expression | |
| currentScrollTop <= 100 ? | |
| $html.classList.add('near-top') : | |
| $html.classList.remove('after-top'); | |
| lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop; | |
| }); |
Useful for:
Dynamic Navigation Bars: The code can be used to hide or show the navigation bar based on scroll direction. For example, hiding the navigation bar when scrolling down to offer a more immersive reading experience, and showing it when scrolling up for easy access.
1.
Scroll-Dependent Styling: It can adjust the styling of elements based on the scroll position. For instance, changing the color, size, or background of the header when the user scrolls past a certain point.
2.
Animation Triggers: The script can be used to trigger animations
3.
or visual effects when the user reaches a specific scroll position. For instance, fading in elements or activating parallax scrolling effects as the user scrolls down the page.
4.
User Engagement Metrics: This code can aid in tracking user engagement by monitoring how users scroll through a page. Understanding if users mostly scroll down or up can provide insights into content placement and overall layout effectiveness.
5.
Infinite Scroll Features: Implementing features like 'infinite scroll' where additional content is loaded when the user scrolls towards the bottom of the page. The code can help in determining when the user is nearing the bottom.
6.
Back-to-Top Buttons: Showing a "Back to Top" button only when the user has scrolled down a significant amount, making the navigation more user-friendly.
7.
Sticky Elements: Adjusting elements to be 'sticky' or fixed in place depending on the scroll position, such as keeping a promotional banner visible only when scrolling down.
8.
Lazy Loading of Images: This code can contribute to a lazy loading strategy where images or content are loaded only when the user scrolls near them, improving page load times.
9.
Accessibility Enhancements: For users who rely on keyboard navigation, this script can help in highlighting the current position on the page, enhancing the overall accessibility of the website.
10.
Feedback on Reading Progress: It can be used to show a reading progress indicator, which changes as the user scrolls through content, especially useful in long articles or tutorials.
This JavaScript code is designed to dynamically update the class list of the HTML document's root element () based on the user's scroll actions on the webpage. Initially, it sets a lastScrollTop variable to track the last scroll position and selects the document's root element, storing it in $html. It adds the class near-top to $html, suggesting that this class is relevant when the page is scrolled to or near the top.
An event listener is then added to the window object to respond to the scroll event. Inside the event listener, currentScrollTop is calculated to determine the current vertical position of the scroll bar. The code then checks if the current scroll position is greater than the last recorded scroll position (lastScrollTop). If it is, it means the user is scrolling down, and the code adds the class scrolling-down and removes scrolling-up from $html. Conversely, if the user is scrolling up, it adds scrolling-up and removes scrolling-down.
Additionally, the code adjusts the classes based on the scroll position relative to the top of the page. If the user has scrolled down 100 pixels or less, it adds near-top, otherwise, it adds after-top. This functionality allows for changing styles or triggering certain behaviors based on the scroll direction and position.
Lastly, lastScrollTop is updated at the end of the event listener to store the current scroll position for comparison during the next scroll event, ensuring the detection of scroll direction in subsequent scrolls. This logic is particularly useful for implementing dynamic navigation bars, scroll-based animations, or visibility toggles based on the user's scroll behavior.