with this code you can change css depending on the direction of the scroll. this example is for header but you can do this for any dom
for example on this example I am hiding the header while scrolling down by moving the header -110px up and when moving up it show itself because the .scrolling-down class removed when scrolling up.
add .header-top to your header or menu that’s how the script selects.
this script adds the direction classes as well when moving down scrolling-down class and moving up it adds scrolling-up class. you can use this classes to do anything for any scroll state.
<style> .header-scrolled .header-logo img{ width:160px } .header-scrolled .header-logo{ padding:0 !important } .header-scrolled{ background:white } .header-scrolled .header-top-inner{ height:80px } .scrolling-down{ transform:translateY(-110px) } </style> <script> document.addEventListener('DOMContentLoaded', function() { setTimeout(() => { const header = document.querySelector('.header-top'); if (header) { let lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop; const handleScroll = () => { const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop; if (currentScrollPosition > header.offsetHeight) { header.classList.add('header-scrolled'); } else { header.classList.remove('header-scrolled'); } if (currentScrollPosition > lastScrollPosition) { header.classList.remove('scrolling-up'); header.classList.add('scrolling-down'); } else if (currentScrollPosition < lastScrollPosition) { header.classList.remove('scrolling-down'); header.classList.add('scrolling-up'); } lastScrollPosition = currentScrollPosition; }; window.addEventListener('scroll', handleScroll); handleScroll(); } else { console.error('Element with class "header-top" not found.'); } }, 10); // Add a 10ms delay }); </script>
This can bu used on any dom btw not just header you can target any dom you want on your page.
if you want to select multiple dom elements use htis script instead.
document.addEventListener('DOMContentLoaded', function () { setTimeout(() => { const headers = document.querySelectorAll('.header-top'); // Select all elements with the class 'header-top' if (headers.length > 0) { let lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop; const handleScroll = () => { const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop; headers.forEach(header => { if (currentScrollPosition > header.offsetHeight) { header.classList.add('header-scrolled'); } else { header.classList.remove('header-scrolled'); } if (currentScrollPosition > lastScrollPosition) { header.classList.remove('scrolling-up'); header.classList.add('scrolling-down'); } else if (currentScrollPosition < lastScrollPosition) { header.classList.remove('scrolling-down'); header.classList.add('scrolling-up'); } }); lastScrollPosition = currentScrollPosition; }; window.addEventListener('scroll', handleScroll); handleScroll(); } else { console.error('No elements with class "header-top" found.'); } }, 10); // Add a 10ms delay });