Jak stworzyć przyklejony nagłówek za pomocą CSS

Leonard Strauss included in Programming Web Design Css

2023-10-31 702 words 4 minutes

Contents

W projektowaniu stron internetowych przyklejony nagłówek jest potężnym narzędziem, które poprawia wrażenia użytkownika i nawigację. Gdy użytkownicy przewijają stronę w dół, przyklejony nagłówek pozostaje widoczny, zapewniając, że niezbędne linki nawigacyjne są zawsze dostępne. Zagłębmy się w zawiłości budowania przyklejonego nagłówka za pomocą CSS.

Do czego służy przyklejony nagłówek?

Trwały nagłówek, który pozostaje ustalony w określonej lokalizacji na stronie internetowej, jest znany jako “lepki nagłówek”. Aby stworzyć taką funkcjonalność, określone właściwości CSS, takie jak właściwość “position” z wartością “stick

Użytkownicy mogą bez wysiłku przeglądać główne linki nawigacyjne bez konieczności przewijania z powrotem na górę strony, zapewniając im płynną i wygodną nawigację podczas korzystania z naszej witryny.

Logo i nazwa marki są wyświetlane w widocznym miejscu, zachowując w ten sposób charakterystyczny charakter marki.

Atrakcyjnym wizualnie i funkcjonalnym wyborem projektowym jest włączenie lepkiego nagłówka, który eliminuje potrzebę nadmiernej ilości nawigacji na pasku bocznym, tworząc w ten sposób dodatkowy obszar do wyświetlania odpowiednich treści na stronie internetowej.

Projektowanie nagłówka: Struktura HTML

Kamień węgielny skutecznego lepkiego nagłówka leży w jego architekturze HTML. Aby skonstruować podstawowe składniki przyklejonego nagłówka, wykonaj następujące kroki, aby utworzyć wymagane elementy HTML.

 <body>
   <header>
     <span class="logo">Company Logo ðŸ </span>
     <nav>
       <ul>
         <li><a href="#home">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#services">Services</a></li>
         <li><a href="#contact">Contact</a></li>
       </ul>
     </nav>
   </header>
   <main id="home"><h1>Home page</h1></main>
   <section id="about"><h1>About</h1></section>
   <section id="services"><h1>Services</h1></section>
   <section id="contact"><h1>Contact</h1></section>
</body>

Niniejszy projekt wykorzystuje element nagłówka, który zawiera emblemat firmy wraz z elementem nawigacyjnym zawierającym uporządkowaną listę hiperłączy. Następnie wykorzystuje główną obudowę i wiele obudów segmentacyjnych, aby zilustrować każdy podział w obszarze treści. Obecnie strona internetowa wyświetla się w następujący sposób:

Laying the Groundwork With CSS

CSS wykorzystuje różne atrybuty modelu pudełkowego, takie jak padding, margin i flexbox, aby stworzyć atrakcyjny wizualnie układ, w którym poszczególne sekcje mają przypisaną jednolitą wysokość.

 @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { font-size: 62.5%; }

body { font-family: "Quicksand", sans-serif; }

main,
section { height: 100vh; }

.logo { font-size: 3rem; }

main,
header,
section {
  display: flex;
  align-items: center;
}

main { justify-content: center; }

header {
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #b2babb;
 }

nav ul {
  display: flex;
  column-gap: 2rem;
  list-style: none;
}

a {
  text-decoration: none;
  font-size: 2rem;
  color: #333;
}

section { justify-content: center; }

#home { background: #2c3e50; }

#about { background: #ccccff; }

#services { background: #f5b7b1; }

#contact { background: #40e0d0; }

h1 {
 font-size: 4rem;
 color: #fff;
}

Strona powinna teraz wyglądać następująco:

Implementacja efektu Sticky: CSS

Aby rozwiązać problem nagłówka przesuwającego się poza ekran podczas przewijania strony w dół, użyj właściwości CSS position i skonfiguruj nagłówek jako element “lepki”.

Ta szczególna właściwość wykazuje cechy przypominające zarówno pozycjonowanie względne, jak i stałe, w odniesieniu do pozycji przewijania użytkownika.

 header {
  justify-content: space-between;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
}

Ustawienie nagłówka na stałą pozycję względem rzutni jest jednym ze sposobów zapewnienia jego widoczności i dostępności, gdy użytkownik porusza się po zawartości strony internetowej. Określając wartość właściwości top w pikselach lub jednostkach procentowych, programista może dokładnie kontrolować, gdzie nagłówek pojawi się w widocznej części ekranu. Gdy użytkownik przewija stronę w dół, nagłówek pozostaje nieruchomy, zapewniając spójne wskazówki wizualne do nawigacji i interakcji z innymi elementami na stronie.

Twoja przeglądarka nie obsługuje tagu wideo.

Rozwiązywanie potencjalnych problemów z układaniem w stosy

Aby zapobiec zasłonięciu przyklejonego nagłówka przez inne elementy na stronie, zaleca się użycie właściwości CSS z-index . Zapewni to, że nagłówek pozostanie widoczny i pozostanie w wyznaczonej pozycji przez cały czas.

 header {
  justify-content: space-between;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 9999;
}

Włącz elegancki atrybut przewijania do znacznika HTML, aby poprawić ogólne wrażenia użytkownika w elegancki sposób:

 html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

Przewijanie tej strony zostało zoptymalizowane tak, aby było płynne i płynne podczas przechodzenia między różnymi sekcjami, zapewniając przyjemniejsze wrażenia użytkownika.

Twoja przeglądarka nie obsługuje tagu wideo.

Ulepszanie nawigacji internetowej za pomocą nagłówków samoprzylepnych CSS

Włączenie trwałego nagłówka do projektu strony internetowej może znacznie poprawić ogólne wrażenia użytkownika. W ten sposób pozwala odwiedzającym zachować świadomość głównego menu nawigacyjnego, utrzymuje jednolitą tożsamość marki i nadaje witrynie aktualny wygląd.

Wykorzystując możliwości CSS, osiągnięcie tego rezultatu jest zarówno łatwe, jak i efektowne. Stała obecność stałego nagłówka może być bardzo korzystna w różnych sektorach ze względu na jego trwałe znaczenie w trendach projektowania stron internetowych pomimo wahań w czasie.