Navigation

Hi! When I open my navigation, I want the body to stop scrolling. I already give 'position:fixed' but it didn't work as expected.
7 Replies
croganm
croganm2y ago
Hello, do you have a codepen you could send to help us visualize the problem?
TL
TL2y ago
No, my project is on going and I haven't host it yet but I will try to write it in codepen to show you. Please wait.
TL
TL2y ago
Here is the codepen
croganm
croganm2y ago
The body doesn't seem to scroll in this version
MarkBoots
MarkBoots2y ago
different options, maybe the easiest one is to add a class to the body with overflow: hidden when nav is active
body.nav-active{ overflow: hidden }
body.nav-active{ overflow: hidden }
document.addEventListener('click', (e) => {
if(e.target !== toggle && e.target !== nav) {
nav.classList.remove('nav-active');
document.body.classList.remove('nav-active');
hamburger.classList.remove('is-active');
}
})

toggle.addEventListener('click', () => {
nav.classList.toggle('nav-active');
document.body.classList.toggle('nav-active');
hamburger.classList.toggle('is-active');
})
document.addEventListener('click', (e) => {
if(e.target !== toggle && e.target !== nav) {
nav.classList.remove('nav-active');
document.body.classList.remove('nav-active');
hamburger.classList.remove('is-active');
}
})

toggle.addEventListener('click', () => {
nav.classList.toggle('nav-active');
document.body.classList.toggle('nav-active');
hamburger.classList.toggle('is-active');
})
you can make it yourself a bit easier, to handle everything with only 1 class that toggles
body {
height: 200vh;

&.nav-active{
overflow: hidden;

.hamburger { transform: rotate(45deg) }
.hamburger::before { opacity: 0 }
.hamburger::after { transform: rotate(90deg) translate(-6px) }

.nav-link {
transform: translateY(0%);
transition-delay: 560ms;
transition-duration: 240ms;
transition-timing-function: cubic-bezier(.1, .2, .3, 1.4);
}
}
}
body {
height: 200vh;

&.nav-active{
overflow: hidden;

.hamburger { transform: rotate(45deg) }
.hamburger::before { opacity: 0 }
.hamburger::after { transform: rotate(90deg) translate(-6px) }

.nav-link {
transform: translateY(0%);
transition-delay: 560ms;
transition-duration: 240ms;
transition-timing-function: cubic-bezier(.1, .2, .3, 1.4);
}
}
}
const toggle = document.querySelector('.nav-toggle');
const nav = document.querySelector('.nav-link');
const hamburger = document.querySelector('.hamburger');

document.addEventListener('click', (e) => {
if(e.target !== toggle && e.target !== nav) {
document.body.classList.remove('nav-active');
}
})

toggle.addEventListener('click', () => {
document.body.classList.toggle('nav-active');
})
const toggle = document.querySelector('.nav-toggle');
const nav = document.querySelector('.nav-link');
const hamburger = document.querySelector('.hamburger');

document.addEventListener('click', (e) => {
if(e.target !== toggle && e.target !== nav) {
document.body.classList.remove('nav-active');
}
})

toggle.addEventListener('click', () => {
document.body.classList.toggle('nav-active');
})
TL
TL2y ago
I really appreciate your help. Thank you!
Want results from more Discord servers?
Add your server