Stwórz przyklejony nagłówek („sticky header”) na stronie za pomocą CSS i JavaScriptu - Prompt do ChatGPT
Zbuduj doskonały sticky header bez zgadywania: gotowy kod, CSS/JS/frameworki, optymalizacja Core Web Vitals, dostępność, testy, animacje, monitoring i checklisty produkcyjne.
Co robi ten prompt:
<ul><li>Generuje kompletny kod HTML, CSS i JavaScript do stworzenia 'przyklejonego nagłówka' (sticky header) na stronie internetowej.</li><li>Przedstawia i porównuje dwa popularne podejścia do implementacji tej funkcjonalności: nowoczesne oparte na czystym CSS oraz klasyczne z użyciem JavaScript.</li><li>Dostarcza szczegółowych wyjaśnień, w tym zalet, wad oraz tabeli porównawczej, aby pomóc użytkownikowi wybrać najlepsze rozwiązanie dla jego projektu.</li></ul>Rola i Kontekst: Jesteś Senior Frontend Developerem specjalizującym się w wydajnych, nowoczesnych i cross-browserowych rozwiązaniach z użyciem HTML, CSS i JavaScript. Twoim priorytetem jest czysty, łatwy w utrzymaniu kod oraz optymalizacja wydajności.
Zadanie (Cel):
Stwórz kompletny, gotowy do wdrożenia kod do implementacji przyklejonego nagłówka (sticky header) na stronie internetowej. Zaprezentuj dwa kluczowe podejścia: nowoczesne z użyciem czystego CSS (position: sticky) oraz klasyczne, bardziej elastyczne, z użyciem JavaScriptu. Wykorzystaj dane wejściowe do personalizacji kodu.
Format Odpowiedzi:
- Krótkie Wprowadzenie: W 2-3 zdaniach wyjaśnij fundamentalną różnicę między podejściem CSS a JavaScript w tym kontekście.
- Podejście 1: Nowoczesne - Czysty CSS (
position: sticky)- HTML: Podaj minimalną, wymaganą strukturę HTML.
- CSS: Przedstaw kompletny, skomentowany kod CSS, który implementuje funkcjonalność. Wskaż, gdzie użytkownik może modyfikować kluczowe wartości.
- Zalety i Wady: Wypunktuj 3 kluczowe zalety i 2 potencjalne wady tego rozwiązania.
- Podejście 2: Klasyczne - JavaScript i CSS
- HTML: Wykorzystaj tę samą strukturę co w podejściu 1.
- CSS: Przygotuj kod CSS dla stanu początkowego oraz stanu "przyklejonego" z użyciem klasy
[Nazwa klasy CSS dla przyklejonego nagłówka]. - JavaScript: Napisz zoptymalizowany, skomentowany skrypt, który nasłuchuje na zdarzenie
scrolli dodaje/usuwa klasę CSS po przekroczeniu progu[Przesunięcie w pikselach, po którym nagłówek ma się przykleić]. Użyj selektora[Selektor CSS nagłówka]. - Zalety i Wady: Wypunktuj 3 kluczowe zalety i 2 potencjalne wady tego rozwiązania.
- Tabela Porównawcza: Stwórz tabelę w formacie Markdown porównującą oba podejścia pod kątem: Wydajności, Kompatybilności z przeglądarkami, Elastyczności (np. animacje) i Złożoności implementacji.
Najważniejsze:
Połóż absolutny nacisk na optymalizację wydajności w rozwiązaniu JavaScript. Wyjaśnij w komentarzu kodu, dlaczego bezpośrednie nasłuchiwanie na scroll może być kosztowne i wspomnij o technikach takich jak debounce lub throttle jako zalecanej praktyce przy bardziej złożonych operacjach. Rekomenduj position: sticky jako domyślne, preferowane rozwiązanie dla 90% przypadków użycia.
Jak używać tego prompta:
Uzupełnij trzy kluczowe pola w sekcji 'Dane wejściowe', aby dostosować wygenerowany kod do Twojej strony internetowej. Przykładowe wartości: <br><b>[Selektor CSS nagłówka]</b>: .main-header<br><b>[Nazwa klasy CSS dla przyklejonego nagłówka]</b>: header--scrolled<br><b>[Przesunięcie w pikselach, po którym nagłówek ma się przykleić]</b>: 150
Dobrze wiedzieć
Wybór między CSS a JavaScriptem ma kluczowe znaczenie dla wydajności strony. Podejście z position: sticky jest niemal zawsze lepszym wyborem, ponieważ przeglądarka zarządza całą logiką w sposób zoptymalizowany, co nie obciąża głównego wątku JavaScript. Rozwiązanie oparte na JavaScript, choć bardziej elastyczne, wymaga nasłuchiwania na zdarzenie scroll, które jest wywoływane bardzo często podczas przewijania. Bez odpowiednich technik optymalizacyjnych, takich jak throttle (ograniczenie liczby wywołań funkcji w czasie) lub debounce (wywołanie funkcji dopiero po zakończeniu serii zdarzeń), może to prowadzić do spadku płynności animacji i ogólnego wrażenia 'zacinania się' strony, szczególnie na słabszych urządzeniach. <br><br> Nowocześniejszą alternatywą dla nasłuchiwania na zdarzenie scroll w JavaScript jest użycie Intersection Observer API. Pozwala ono na asynchroniczne obserwowanie, kiedy dany element (np. specjalny znacznik umieszczony tuż pod nagłówkiem) wchodzi w obszar widoczny na ekranie lub go opuszcza. Jest to znacznie bardziej wydajne niż ciągłe sprawdzanie pozycji przewijania, ponieważ kod wykonuje się tylko w kluczowych momentach (przecięcia), a nie przy każdym pojedynczym pikselu przewinięcia. Chociaż implementacja może być nieco bardziej złożona, zyski w wydajności są znaczące.