Difficulty:BeginnerLength:MediumLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishEspañol한국어Tiếng Việt

Trong chỉ dẫn này, bọn họ sẽ tìm hiểu cách tạo thành một dạng hay được thấy trên nhiều website ngày này: một header thắt chặt và cố định và phim hoạt hình thành một tinh thần thu nhỏ tuổi hơn khi họ cuộn trang xuống. Họ sẽ bước đầu với cấu tạo cơ bản, tiếp đến làm cho phần đông thứ hoạt động bằng phương pháp sử dụng CSS cùng JavaScript thuần tuý. Trước khi kết thúc, bọn họ tìm hiểu cấp tốc cách chúng ta có thể tối ưu hóa mã của chúng ta cũng như bàn luận về những thử thách hiện tại khi áp dụng điều này trên các thiết bị cảm ứng.Bạn vẫn xem: cố định header lúc cuộn trang

Để nắm rõ về các gì chúng ta sẽ xây dựng, sau đây là phiên bản demo (bạn rất có thể xem toàn màn hình):

Mã HTML

Chúng ta sẽ ban đầu bài tập này với mã ghi lại sau phía trên - một tiêu đề, tất cả chứa một và một trong những các phần tử lồng nhau:

logo sản phẩm ☰ thành phần nav, là 1 phần của header, chứa bố phần tử; logo, menu chính, và một nút nhằm kích hoạt một menu đáp ứng (responsive) (dưới 1061px).

Lưu ý: nếu như bạn nhấp vào nút này, sẽ không có gì xảy ra. Sinh sản menu đáp ứng nằm ko kể phạm vi của khuyên bảo này.

Các phong cách CSS ban đầu

Bây giờ họ hãy xem một trong những phong giải pháp CSS cho những thứ:

header position: fixed; top: 0; width: 100%; padding: 20px; box-sizing: border-box; background: #DD3543;nav display: flex; align-items: flex-end; justify-content: space-between; transition: align-items .2s;.logo font-size: 2rem; display: inline-block; padding: 20px 30px; background: #F35B66; color: #fff; margin: 50px 0 0 50px; transition: all .2s;ul display: flex; margin: 50px 50px 0 0; padding: 0; transition: margin .2s;li:not(:last-child) margin-right: 20px;li a display: block; padding: 10px 20px;.toggle-menu display: none; font-size: 2rem; color: #fff; margin: 10px 10px 0 0; transition: margin .2s;main display: block; padding: 0 20px;Dưới đó là một phân tích và lý giải ngắn về những thuộc tính CSS đặc biệt quan trọng nhất:

Phần tử header là 1 phần tử gồm vị trí nạm định. Họ sử dụng flexbox để ba cục thành phần nav. Hình ảnh sản phẩm có margin-top: 50px và margin-left: 50px. Ngoài ra, họ cho nó padding: 20px 30px. Menu bao gồm nằm về một bên so cùng với logo, với margin-top: 50px và margin-right: 50px. Nút nhấn được ẩn đi. Nó được hiển thị khi chiều rộng viewport nhỏ dại hơn 1061px. Hơn nữa, họ thiết lập margin bên trên và bên phải là 10px. Họ thêm ở trong tính transition vào các bộ phận mà những giá trị trực thuộc tính của bọn chúng sẽ chuyển đổi trong tương lai. Bằng phương pháp này, bọn họ đạt được một hiệu ứng chuyển tiếp thướt tha giữa trạng thái ban đầu và tâm trạng cuối cùng.

Với các luật này, thì header trông hệt như thế này:


Bạn đang xem: Cố định header khi cuộn trang

*

Xem thêm: Download Mẫu Powerpoint Đẹp Làm Thuyết Trình, 30 Mẫu Slide Powerpoint Đẹp, Miễn Phí Của Google

Hoạt hình phần Header

Đến bây giờ chúng ta đã xây dựng kết cấu cơ bản của header. Đây là lúc đề cập đến các bước tiếp theo:

Phần tử main nên được đặt ngay phía bên dưới header. Hãy nhớ rằng header có positioned: fixed, và cho nên vị trí của chính nó là làm việc trên đầu của thành phần main. Header đã được hoạt hình khi họ cuộn trang web xuống.

Để giải quyết và xử lý nhiệm vụ đầu tiên, chúng ta thêm một nằm trong tính padding-top vào thành phần main. Cực hiếm của trực thuộc tính này nên bằng với chiều cao của header. Vào trường hòa hợp của bọn chúng ta, bọn họ vẫn chưa tùy chỉnh thiết lập một chiều cao cố định và thắt chặt cho header của bọn chúng ta, vày thế chúng ta sẽ sử dụng một vài JavaScript để đo lường và thống kê nó, và sau đó thêm padding khớp ứng vào trong bộ phận main.

Để xử lý nhiệm vụ thứ hai, họ sẽ làm phần lớn thứ sau đây:

Truy vấn số px mà trang web đã được cuộn theo hướng dọc. Nếu con số này lớn hơn 150px, bọn họ thêm lớp scroll vào header.

JavaScript

Dưới đây là các mã JavaScript quan trọng - chúng ta bước đầu bằng cách khẳng định một số biến, tính độ cao của header, sau đó gắn quý giá đó đến padding-top của thành phần main:

Bây giờ vào sự khiếu nại cuộn trang:

Sau đó, họ sử dụng ở trong tính classList nhằm thêm và đào thải lớp scroll ngoài header của bọn chúng ta. Không phải toàn bộ các trình chăm chú đều hỗ trợ thuộc tính này, bởi vì vậy nếu bạn có nhu cầu hỗ trợ bất kỳ trình chăm chút nào hãy xem qua các polyfill classList.js cùng classie.js. Ví dụ, chúng ta có thể sử dụng ở trong tính className để điều khiển và tinh chỉnh class đối chọi của chúng ta, cơ mà trong một trường hợp thực tế điều này hoàn toàn có thể không nên là một giải pháp lý tưởng (trong ngôi trường hợp bọn họ có các lớp).

Để tổng hợp hầu hết thứ, họ gọi các hàm của bọn họ trong hai trường đúng theo khác nhau:

Khi trang web được nạp với khi chúng ta thay đổi kích thước cửa sổ trình duyệt.

window.onload = function() setTopPadding(); onScroll();;window.onresize = function() setTopPadding();;

CSS

Một khi họ cuộn xuống quá quá giới hạn của 150px, một vài thuộc tính CSS bổ sung sẽ được áp dụng:

.scroll box-shadow: 0 7px 0 0 rgba(0, 0, 0, .1);.scroll .logo padding: 10px 20px; font-size: 1.5rem;.scroll nav align-items: center;.scroll .logo,.scroll ul,.scroll .toggle-menu margin: 0;Cụ thể, bọn họ tạo ra các thay đổi sau:

Thêm một láng đổ vào header. Giảm padding và size phông chữ của logo. Biến đổi việc bố trí các thành phần flex theo cross-axis (trục dọc). Xoá margin khỏi logo, menu, cùng nút liên kết.

Các thuộc tính nói bên trên dẫn mang lại cách sắp xếp header mới này:


*

Tạo khả năng đáp ứng (Responsive)

Như chúng ta đã nhắc trong phần trước, khi chiều rộng viewport nhỏ hơn 1061px, bọn họ ẩn menu với hiển thị nút liên kết (mà không thực sự làm bất cứ điều gì). Phân phối đó, chúng ta tạo ra một số trong những thay đổi khác trong các phần tử đích.