Usuń przyklejone nagłówki, które zasłaniają treść
Przyklejone nagłówki miały trzymać nawigację pod ręką. Zbyt często po prostu śledzą cię w dół strony, połykając jedną trzecią ekranu i zasłaniając nagłówek, do którego właśnie kliknąłeś. Oto jak je okiełznać dzięki JustZix.
Dwa problemy z przyklejonymi nagłówkami
Po pierwsze, kosztują pionową przestrzeń — na laptopie gruby przyklejony pasek plus przyklejony pasek cookie potrafią zjeść połowę widoku. Po drugie, psują linki kotwicowe: skaczesz do sekcji, a nagłówek ląduje za nagłówkiem strony, ukryty. Oba to czyste poprawki CSS.
Przepis 1: Całkowicie odklej nagłówek
Jeśli nie potrzebujesz, by pasek nawigacji za tobą podążał, najczystszą poprawką jest sprawienie, by przewijał się jak zwykła treść.
/* Spraw, by nagłówki przewijały się normalnie */
header, .site-header, .navbar,
[class*="sticky-header"], [class*="header-fixed"],
[style*="position: sticky"], [style*="position:fixed"] {
position: static !important;
top: auto !important;
}To najbardziej wpływowa reguła w tym wpisie: natychmiast odzyskujesz przestrzeń ekranu, a nagłówek nadal jest na górze, gdy przewiniesz w górę.
Przepis 2: Zachowaj nagłówek, ale napraw skoki kotwic
Może lubisz przyklejony pasek nawigacji i nie znosisz tylko tego, że zasłania nagłówki po skoku do kotwicy. Właściwość scroll-margin-top mówi przeglądarce, by zostawiła miejsce.
/* Powstrzymaj przyklejony nagłówek przed zasłanianiem celów kotwic */
:target,
h1[id], h2[id], h3[id], h4[id] {
scroll-margin-top: 90px !important;
}Ustaw wartość mniej więcej na wysokość nagłówka. Jeśli nagłówki nadal lądują za wysoko lub za nisko, dostrój 90px, aż zakotwiczone sekcje usiądą tuż pod paskiem.
Przepis 3: Zmniejsz przerośnięty nagłówek
Niektóre nagłówki są przyklejone i ogromne. Jeśli chcesz utrzymać go przypiętego, ale odzyskać przestrzeń, ogranicz jego wysokość i ukryj nieporęczne dodatki.
/* Odchudź rozdęty przyklejony nagłówek */
.site-header, header.sticky {
max-height: 48px !important;
overflow: hidden !important;
}
/* Usuń drugorzędne rzędy: paski wyszukiwania, paski promocji */
.header-promo, .header-secondary,
.sub-nav, .announcement-bar {
display: none !important;
}Przepis 4: Ukryj nagłówek, dopóki nie przewiniesz w górę
Dla bardziej dopracowanego efektu ukryj nagłówek podczas czytania i odsłaniaj go tylko przy przewijaniu w górę. To wymaga niewielkiej reguły JS.
// Pokaż nagłówek tylko przy przewijaniu w górę
let lastY = window.scrollY;
const bar = document.querySelector('header, .site-header, .navbar');
if (bar) {
bar.style.transition = 'transform .2s ease';
window.addEventListener('scroll', () => {
const y = window.scrollY;
bar.style.transform =
(y > lastY && y > 200) ? 'translateY(-100%)' : 'translateY(0)';
lastY = y;
}, { passive: true });
}Teraz nagłówek chowa się, gdy czytasz w dół, i wsuwa się z powrotem w chwili, gdy przewiniesz w górę — zachowanie, które większość stron powinna była dostarczyć od początku.
Nie zapomnij o stopce
Przyklejone stopki i dymki czatu powodują ten sam problem zjadania treści na dole ekranu. To samo podejście je usuwa:
/* Usuń przyklejone stopki i widżety czatu */
.sticky-footer, [class*="cookie-bar"],
[class*="chat-widget"], [id*="intercom"],
[class*="floating-cta"] {
display: none !important;
}Wybierz właściwy przepis
- Chcesz maksimum przestrzeni? Użyj Przepisu 1.
- Lubisz pasek nawigacji, nie znosisz skoków? Użyj Przepisu 2.
- Chcesz kompromisu? Połącz Przepis 3 i 4.
Stosuj je per strona, bo struktura nagłówków różni się wszędzie. JustZix trzyma regułę każdej strony osobno, więc możesz dostroić jedną bez ruszania reszty.
Zacznij odzyskiwać ekran
Zainstaluj ze strony pobierz JustZix i przejrzyj gotowe przykłady, aby zdobyć więcej poprawek układu. Przyklejone nagłówki często dzielą przestrzeń z banerami reklamowymi — usuń je też naszym poradnikiem blokuj reklamy display regułami CSS.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.