Jak unieruchomić stronę pod nawigacją mobilną?

J

Na pewno każdy początkujący front-end developer choć raz spotkał się z problemem, w którym po otwarciu nawigacji mobilnej (menu hamburgerowe), treść na stronie, która znajdowała się pod nawigacją, poruszała 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;

Dla najlepszego efektu:

  • 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ą scroll’ować.

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.

HTML:

<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>

CSS:

* {
	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;
}

JS:

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-a z klasą nav-items, w którym 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.

Naucz się JavaScriptu – sprawdź nasz kurs! 🙂

JavaScript – Jedyny Kurs, Którego Potrzebujesz

O autorze

Majek

Właściciel MMC School & MMC World.
Wielki miłośnik kotletów schabowych, fan F1, piłki nożnej, technologii oraz muzyki.

Dodaj komentarz

Autor Majek