Na pewno każdy początkujący front-end developer choć raz spotkał się z tym problemem.
Otwieramy nawigację mobilną (menu hamburgerowe), a treść na stronie, która znajduje się pod nią, porusza się w górę i dół.
Oczywiście nie chcemy takiego zachowania, wygląda to mało profesjonalnie.
Na szczęście istnieje bardzo proste rozwiązanie tego problemu!
Wystarczy dodać do naszego body właściwość overflow: hidden;
Zobacz, jak to działa w praktyce:
- wklej poniższy kod do Twojego edytora kodu,
- uruchom narzędzia deweloperskie,
- włącz podgląd na urządzenie mobilne,
- kliknij ikonę burgera i zobacz, jak zachowuje się strona, kiedy próbujesz ją scrollować.
Teraz odkomentuj overflow: hidden; w klasie sticky-body i zobacz różnicę. 🙂
P.S. Pod kodem, na samym dole artykułu znajduje się objaśnienie działania funkcji w JavaScript.
<nav>
<div class="nav-items">
<a href="#">Home</a>
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</div>
<button class="burger-btn">🍔</button>
</nav>
<section class="section">Sekcja 1</section>
<section class="section">Sekcja 2</section>
<section class="section">Sekcja 3</section>* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #14213d;
color: #e5e5e5;
}
.nav-items {
position: fixed;
top: 0;
left: 0;
transform: translateX(-100%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
transition: transform 0.3s;
}
.nav-items a {
margin: 2em;
text-decoration: none;
font-size: 2rem;
color: #fff;
}
.active {
transform: translateX(0);
}
.sticky-body {
/* overflow: hidden; */
}
.burger-btn {
position: fixed;
top: 30px;
right: 30px;
background: none;
border: none;
font-size: 3rem;
cursor: pointer;
}
.section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
font-size: 4rem;
}
.section:nth-child(even) {
background-color: #fca311;
color: #fff;
}const burgerBtn = document.querySelector('.burger-btn')
const navItems = document.querySelector('.nav-items')
const handleMobileNav = () => {
navItems.classList.toggle('active')
document.body.classList.toggle('sticky-body')
}
burgerBtn.addEventListener('click', handleMobileNav)Wyjaśnienie kodu JavaScript
Do zmiennych burgerBtn oraz navItems pobraliśmy przycisk (burger icon) oraz div z klasą nav-items. W tym div przechowywane są wszystkie linki z nawigacji.
Następnie nasłuchujemy na kliknięcie przycisku.
Kiedy kliknięcie zostanie wykryte, uruchomiona zostaje funkcja handleMobileNav, która dodaje do nawigacji klasę active (dzięki czemu nawigacja pojawia się na stronie) oraz klasę sticky-body (dzięki czemu treść na stronie internetowej pozostaje nieruchoma).
Po ponownym wciśnięciu burgera, klasy active oraz sticky-body zostają zabrane. Tak działa metoda toggle.
