Trong hướng dẫn này, chúng ta sẽ học cách để tạo ra một mô hình nhìn thấy trên nhiều trang web những ngày này: một tiêu đề cố định mà làm sống động cho một trạng thái ít gây khó chịu khi chúng ta di chuyển xuống dưới trang. Chúng tôi sẽ bắt đầu với các cấu trúc cơ bản, sau đó nhận được những điều làm việc sử dụng CSS và JavaScript . Trước khi kết thúc, chúng tôi sẽ ngắn gọn bao gồm cách chúng tôi có thể tối ưu hóa mã của chúng tôi cũng như thảo luận về những thách thức khi áp dụng hình thức này mô hình để chạm vào thiết bị.
HTML Markup
Chúng ta sẽ bắt đầu bài tập này với những điều sau đây đánh dấu-một tiêu đề, có chứa một <nav> và một vài phần tử lồng nhau khác:
<header>
<nav>
<h1>
<a href="" class="logo">Logo</a>
</h1>
<ul>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Services</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
<button class="toggle-menu" aria-label="Responsive Navigation Menu">☰</button>
</nav>
</header>
<main>
<!-- content here -->
</main>
Các yếu tố nav là một phần của tiêu đề, bao gồm ba yếu tố; các biểu tượng, các menu chính, và một nút giữ chỗ để kích hoạt một đơn đáp ứng (dưới 1061px).
Lưu ý : Nếu bạn nhấn vào nút này, không có gì nhiều sẽ xảy ra. Tạo menu ứng là vượt ra ngoài phạm vi của hướng dẫn này.
Các mã JavaScript
Đoạn mã trên sẽ thực hiện một số biến, tính toán kích thước của header thêm các giá trị padding-top với yếu tố main
var m = document.querySelector("main"),
h = document.querySelector("header"),
hHeight;
function setTopPadding() {
hHeight = h.offsetHeight;
m.style.paddingTop = hHeight + "px";
}
Hỗ trợ trình duyệt
Hiệu ứng này làm việc trong hầu hết các trình duyệt và các thiết bị gần đây. Tuy nhiên, kinh nghiệm không phải là lý tưởng trong tất cả các thiết bị di động (ví dụ như các thiết bị iOS). Điều này xảy ra bởi vì các cuộn kiện xử khác nhau trên các trình duyệt máy tính để bàn so với các thiết bị di động.
HTML Markup
Chúng ta sẽ bắt đầu bài tập này với những điều sau đây đánh dấu-một tiêu đề, có chứa một <nav> và một vài phần tử lồng nhau khác:
<header>
<nav>
<h1>
<a href="" class="logo">Logo</a>
</h1>
<ul>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Services</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
<button class="toggle-menu" aria-label="Responsive Navigation Menu">☰</button>
</nav>
</header>
<main>
<!-- content here -->
</main>
Các yếu tố nav là một phần của tiêu đề, bao gồm ba yếu tố; các biểu tượng, các menu chính, và một nút giữ chỗ để kích hoạt một đơn đáp ứng (dưới 1061px).
Lưu ý : Nếu bạn nhấn vào nút này, không có gì nhiều sẽ xảy ra. Tạo menu ứng là vượt ra ngoài phạm vi của hướng dẫn này.
Các mã JavaScript
Đoạn mã trên sẽ thực hiện một số biến, tính toán kích thước của header thêm các giá trị padding-top với yếu tố main
var m = document.querySelector("main"),
h = document.querySelector("header"),
hHeight;
function setTopPadding() {
hHeight = h.offsetHeight;
m.style.paddingTop = hHeight + "px";
}
Hỗ trợ trình duyệt
Hiệu ứng này làm việc trong hầu hết các trình duyệt và các thiết bị gần đây. Tuy nhiên, kinh nghiệm không phải là lý tưởng trong tất cả các thiết bị di động (ví dụ như các thiết bị iOS). Điều này xảy ra bởi vì các cuộn kiện xử khác nhau trên các trình duyệt máy tính để bàn so với các thiết bị di động.