// animacja btn-burger + nadanie klasy na body, zeby scroll nie działał!!!
const body = document.querySelector('body');
const nav = document.querySelector('nav');
const btnBurger = document.querySelector('.btn-burger');
btnBurger.addEventListener('click', () => {
btnBurger.classList.toggle('active');
// blokowanie scrolla, kiedy nav jest otwarty
nav.classList.toggle('open-nav');
body.classList.toggle('lock-scroll');
})
// zamykanie nav po kliknieciu w dowolne 'li'
const liNavBar = [...document.querySelectorAll('li')];
function closingNav() {
liNavBar.forEach(li => {
li.addEventListener('click', () => {
btnBurger.classList.remove('active');
nav.classList.remove('open-nav');
body.classList.remove('lock-scroll');
})
})
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
overflow-x: hidden;
scroll-behavior: smooth;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
/* blokowanie scrolla */
body.lock-scroll {
/* overflow: hidden; */
}
body onload="slider()">
<header>
<h2 class="logo">MyCity</h2>
<div class="btn-burger">
<div class="line"></div>
<div class="line"></div>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about_us">About us</a></li>
<li><a href="#">Attractions</a></li>
<li><a href="#">Districts</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
Witam,
macie moze jakies pomysły, jezeli chodzi o problem ze scrollem. Jak otwieram nav na mobile, chce , zeby body nie mogło sie scrollowac. Po nacisniecu w burger-btn nadaje klase na body.lock-scroll do ktorej przypisuje position-fixed. Jak widomo wszystkjo hula, ale jak nacisne btn to wysyla mnie na góre, jest to wina position- fixed. Ustawiłem tez height na body i html na 100% i wtedy scroll behavior przestaje działać. Czy ktoś z Was miał podobny problem ??
Jak sie z tym rozprawić???, bede wdzieczny za pomoc:)