Stworzyłeś wspaniałą stronę typu one-page. Nagłówek jest przyklejony do górnej krawędzi, a nawigacja oparta o hashe bez użycia JavaScript. Wygląda fajnie i nowocześnie, ale kliknięcie w link nawigacji powoduje przesunięcie na samą górę, a więc header skutecznie przykrywa fragment tej sekcji strony.
Jak zmusić stronę, aby ustawiała się pod nagłówkiem, czyli z przesunięciem o zadaną ilość pikseli?
Jest kilka rozwiązań tego problemu. Tu przedstawię jedną, nie wiem czy najprostszą, ale prostą.
Załóżmy, że struktura HTML wygląda tak:
<body>
<header>
<nav>
<a href="#sekcja1">a</a>
<a href="#sekcja2">b</a>
<a href="#sekcja3">c</a>
</nav>
</header>
<section id="sekcja1">treść sekcji 1</div>
<section id="sekcja2">treść sekcji 2</div>
<section id="sekcja3">treść sekcji 3</div>
</body>
A CSS:
body {
margin: 0;
}
header {
height: 100px;
position: fixed;
background: #000;
z-index: 1;
left: 0;
top: 0;
width: 100%;
}
header nav a {
float: left;
color: #fff;
}
section {
height: 100vh;
position: relative;
background-color: #f00;
}
section:nth-child(even) {
background-color: #f0f;
}
Powyższy kod ustawi nam na stronie nagłówek o wysokości 100px zawsze podczepiony pod górę strony, a naprzemiennie kolorowane sekcje będą mieć pełną wysokość strony.
W tym momencie strona będzie działać tak jak tego nie oczekujemy, czyli docelowa sekcja ustawi się właśnie pod nagłówkiem.
Dodajmy do CSS fragment:
section {
margin-top: -100px;
border-top: 100px solid transparent;
}
section:first-of-type {
margin-top: 0;
}
Powyższe właściwości spowodują przesunięcie każdej strony o 100px do góry (wartość margin-top równa negatywnej wysokości nagłówka). Jednocześnie szerokość górnej ramki spowoduje odpechnięcie zawartości sekcji w dół. No właśnie, zawartości sekcji, ale nie tła sekcji (krawędzi sekcji). Ramka przyjmuje kolor tła elementu, bo jest przezroczysta, a to powoduje efekt nachodzenia. Jednak z pomocą nam przychodzi właściwość background-clip powoduje obcięcie tła/koloru elementu do jej zawartości - ramka i padding nie przyjmują koloru tła sekcji.
W przypadku kiedy sekcje mają ustawione tło na przezroczyste, background-clip można się pozbyć.
Pozostaje jednak problem z dostępnością dla użytkownika elementów przy dolnej krawędzi strony. Teksty lub obrazki stają się "nieklikalne". Aby temu zaradzić należy ustawić dla sekcji z-index o wartościach malejących. Trzeba pamiętać o najwyższej wartości dla nagłówka.
Powyższe rozwiązanie można nieco zmodyfikować kiedy między kolejnymi sekcjami jest odstęp o wysokości równej wysokości nagłówka. Wyrzucamy wtedy całkowicie margin-top dla sekcji - każda z nich jest oddalona od poprzedniej o 100px, które stanowi border-top.
Teraz z tą wisienką na torcie, możesz pokazać swoją stronę całemu światu. A jeśli jesteś kobietą i szykujesz się do zamążpójścia, to uważaj, aby nie rzucić ślubnego bukietu wujkowi!
Przydatne linki:
Właściwość background-clip