Detect Scrolling Direction (Up/Down)
Documentation
Webflow
Code
Step 1: Add HTML
HTML
Copy
<body data-scrolling-started="false" data-scrolling-direction="up"></body>Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
function initDetectScrollingDirection() {
let lastScrollTop = 0;
let latestScrollTop = 0;
let ticking = false;
const threshold = 10; // Minimal scroll distance to switch to up/down
const thresholdTop = 50; // Minimal scroll distance from top of window to start
const directionElements = document.querySelectorAll('[data-scrolling-direction]');
const startedElements = document.querySelectorAll('[data-scrolling-started]');
let currentDirection = 'up';
let currentStarted = 'false';
function updateElements(elements, attribute, value) {
elements.forEach((el) => el.setAttribute(attribute, value));
}
function handleScroll() {
const nowScrollTop = Math.max(latestScrollTop, 0);
if (Math.abs(lastScrollTop - nowScrollTop) >= threshold) {
const direction = nowScrollTop > lastScrollTop ? 'down' : 'up';
const started = nowScrollTop > thresholdTop ? 'true' : 'false';
if (direction !== currentDirection) {
updateElements(directionElements, 'data-scrolling-direction', direction);
currentDirection = direction;
}
if (started !== currentStarted) {
updateElements(startedElements, 'data-scrolling-started', started);
currentStarted = started;
}
lastScrollTop = nowScrollTop;
}
ticking = false;
}
window.addEventListener('scroll', () => {
latestScrollTop = window.scrollY;
if (!ticking) {
ticking = true;
window.requestAnimationFrame(handleScroll);
}
}, { passive: true });
}
// Initialize Detect Scrolling Direction
document.addEventListener('DOMContentLoaded', () => {
initDetectScrollingDirection();
});Implementation
Attributes
- Add
[data-scrolling-started="false"]to the<body>, used to check if user scrolled - Add
[data-scrolling-direction="up"]to the<body>, used to check if user scrolling up or down
Example structure
For both Webflow and Code
<body data-scrolling-started="false" data-scrolling-direction="up">
<nav></nav>
</body>
Copy
Animating
Use CSS to animate objects based on the changing attributes
.nav {
transition: transform 1s ease, padding 1s ease;
transform: translateY(0%) rotate(0.001deg);
padding: 2em 1em;
}
/* Shrink nav when scrolling started */
[data-scrolling-started="true"] .nav {
padding: 1em 1em;
}
/* Move nav out of window when scrolling down */
[data-scrolling-started="true"][data-scrolling-direction="down"] .nav {
transform: translateY(-100%) rotate(0.001deg);
}
/* Change background to filled when scrolling started */
.nav__inner {
transition: background-color 1s ease;
background-color: transparent;
}
[data-scrolling-started="true"] .nav__inner {
background-color: #fff;
}
Copy
Resource details
Published
December 31, 2024
Category
Utilities & Scripts
Popularity
1.9K visitors
Need help?
Join Slack
