Cách xây dựng tiêu đề cố định bằng CSS
Trong thiết kế web, tiêu đề cố định là một công cụ mạnh mẽ giúp nâng cao trải nghiệm và điều hướng của người dùng. Khi người dùng cuộn xuống một trang web, tiêu đề cố định vẫn hiển thị, đảm bảo rằng các liên kết điều hướng thiết yếu luôn có thể truy cập được. Hãy cùng tìm hiểu sự phức tạp của việc xây dựng tiêu đề cố định bằng CSS.
Sử dụng Tiêu đề cố định là gì?
Tiêu đề liên tục vẫn cố định ở một vị trí cụ thể trên trang web được gọi là “tiêu đề cố định”. Để tạo chức năng như vậy, các thuộc tính CSS cụ thể như thuộc tính “position” có giá trị “stick
Người dùng có thể dễ dàng duyệt qua các liên kết điều hướng chính mà không cần phải cuộn ngược lên đầu trang, mang lại cho họ khả năng điều hướng liền mạch và thuận tiện trong suốt trải nghiệm của họ trên trang web của chúng tôi.
Logo và tên thương hiệu được hiển thị nổi bật, qua đó giữ được nét đặc trưng của thương hiệu.
Một lựa chọn thiết kế hấp dẫn về mặt trực quan và chức năng là kết hợp tiêu đề cố định giúp loại bỏ nhu cầu điều hướng quá nhiều trên thanh bên, từ đó tạo thêm khu vực để hiển thị nội dung có liên quan trên trang web.
Thiết kế Header: Cấu trúc HTML
Nền tảng của một tiêu đề hấp dẫn hiệu quả nằm ở kiến trúc HTML của nó. Để xây dựng các thành phần thiết yếu của tiêu đề cố định, hãy làm theo các bước sau để tạo các phần tử HTML cần thiết.
<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>
Thiết kế hiện tại sử dụng thành phần tiêu đề kết hợp biểu tượng của công ty cùng với yếu tố điều hướng có danh sách các siêu liên kết được sắp xếp theo thứ tự. Sau đó, nó sử dụng một khung bao chính và nhiều khung phân đoạn để minh họa mọi phân chia trong khu vực nội dung. Hiện tại, trang web hiển thị như sau:
Đặt nền tảng với CSS
CSS sử dụng các thuộc tính mô hình hộp khác nhau như phần đệm, lề và flexbox để tạo bố cục hấp dẫn trực quan, trong đó các phần riêng lẻ được chỉ định một chiều cao thống nhất.
@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;
}
Trang bây giờ sẽ trông như thế này:
Thực hiện hiệu ứng Sticky: CSS
Để khắc phục sự cố tiêu đề di chuyển khỏi màn hình trong khi cuộn xuống trang, hãy sử dụng thuộc tính CSS vị trí và định cấu hình tiêu đề làm phần tử"dính".
Thuộc tính cụ thể này thể hiện các đặc điểm gợi nhớ đến cả vị trí tương đối và vị trí cố định, liên quan đến tư thế cuộn của người dùng.
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}
Đặt tiêu đề có vị trí cố định so với khung nhìn là một cách để đảm bảo khả năng hiển thị và khả năng truy cập của nó khi người dùng điều hướng qua nội dung của trang web. Bằng cách chỉ định giá trị của thuộc tính hàng đầu bằng pixel hoặc đơn vị phần trăm, nhà phát triển có thể kiểm soát chính xác vị trí tiêu đề sẽ xuất hiện trong phần hiển thị của màn hình. Khi người dùng cuộn xuống trang, tiêu đề vẫn đứng yên, cung cấp tín hiệu trực quan nhất quán để điều hướng và tương tác với các thành phần khác trên trang web.
Trình duyệt của bạn không hỗ trợ thẻ video.
Giải quyết các vấn đề xếp chồng tiềm ẩn
Để ngăn tiêu đề cố định bị che khuất bởi các phần tử khác trên trang, bạn nên sử dụng thuộc tính CSS z-index. Điều này sẽ đảm bảo rằng tiêu đề vẫn hiển thị và luôn ở vị trí được chỉ định.
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}
Kết hợp thuộc tính cuộn kiểu dáng đẹp vào thẻ HTML để nâng cao trải nghiệm người dùng tổng thể một cách trang nhã:
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
Việc cuộn trang này đã được tối ưu hóa để liền mạch và trôi chảy khi chuyển đổi giữa các phần khác nhau, mang lại trải nghiệm thú vị hơn cho người dùng.
Trình duyệt của bạn không hỗ trợ thẻ video.
Nâng cao điều hướng trang web với các tiêu đề cố định CSS
Việc kết hợp tiêu đề liên tục trong thiết kế web của bạn có thể nâng cao đáng kể trải nghiệm tổng thể của người dùng. Bằng cách đó, nó cho phép khách truy cập duy trì nhận thức về menu điều hướng chính, duy trì nhận diện thương hiệu thống nhất và mang lại giao diện cập nhật cho trang web của bạn.
Việc sử dụng các khả năng của CSS để đạt được kết quả này vừa dễ dàng vừa có tác động mạnh mẽ. Sự hiện diện vĩnh viễn của tiêu đề cố định có thể mang lại lợi ích cao cho nhiều lĩnh vực khác nhau do tính liên quan lâu dài của nó trong các xu hướng thiết kế web bất chấp những biến động theo thời gian.