Cố định header khi cuộn trang

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

Trong khuyên bảo này, họ sẽ mày mò giải pháp chế tác một dạng thường được thấy bên trên nhiều trang web ngày này: một header cố định và thắt chặt cùng hoạt hình thành một tâm lý thu bé dại hơn Lúc chúng ta cuộn trang xuống. Chúng ta vẫn ban đầu với cấu trúc cơ phiên bản, tiếp nối làm cho đầy đủ đồ vật vận động bằng phương pháp sử dụng CSS và JavaScript đơn thuần. Trước Lúc kết thúc, họ tò mò nkhô giòn phương pháp bạn cũng có thể buổi tối ưu hóa mã của bọn họ cũng như đàm đạo về đông đảo thử thách ngày nay Lúc vận dụng điều này bên trên các lắp thêm chạm màn hình.

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

Để nắm rõ về các gì bọn họ sẽ xây dựng, bên dưới đấy là bản thử nghiệm (bạn có thể coi toàn màn hình):

Mã HTML

Chúng ta đang ban đầu bài tập này với mã lưu lại sau đây - một tiêu đề, có cất một với một vài các thành phần lồng nhau:

Logo ☰ Phần tử nav, là một trong những phần của header, đựng ba phần tử; hình ảnh, menu chính, và một nút ít nhằm kích hoạt một thực đơn đáp ứng nhu cầu (responsive) (bên dưới 1061px).

Lưu ý: Nếu bạn nhấp vào nút này, đang không tồn tại gì xẩy ra. Tạo menu đáp ứng nằm ngoài phạm vi của lý giải này.

Các phong thái CSS ban đầu

Bây giờ đồng hồ họ hãy xem một trong những phong thái 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;.hình ảnh 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-thực đơn display: none; font-size: 2rem; color: #fff; margin: 10px 10px 0 0; transition: margin .2s;main display: block; padding: 0 20px;Dưới đây là một giải thích ngắn về các thuộc tính CSS đặc biệt nhất:

Phần tử header là 1 phần tử gồm vị trí cố định và thắt chặt. Chúng ta áp dụng flexbox nhằm bố cục tổng quan thành phần nav. Logo có margin-top: 50px và margin-left: 50px. Ngoài ra, họ mang lại nó padding: 20px 30px. Menu chủ yếu nằm về một mặt đối với biệu tượng công ty, với margin-top: 50px và margin-right: 50px. Nút ít bấm được ẩn đi. Nó được hiển thị Khi chiều rộng viewport bé dại rộng 1061px. hơn nữa, chúng ta tùy chỉnh cấu hình margin bên trên với bên cần là 10px. Chúng ta thêm trực thuộc tính transition vào những bộ phận nhưng mà những quý hiếm ở trong tính của bọn chúng đã đổi khác sau này. Bằng cách này, họ có được một hiệu ứng chuyển tiếp mượt mà giữa trạng thái ban đầu cùng trạng thái ở đầu cuối.

Với những vẻ ngoài này, thì header trông giống như chũm này:

*

Hoạt hình phần Header

Đến bây giờ họ đã thi công cấu trúc cơ bạn dạng của header. Đây là thời điểm đề cùa đến các bước tiếp theo:

Phần tử main nên đặt tức thì bên dưới header. Hãy hãy nhớ là header có positioned: fixed, cùng vì vậy địa chỉ của chính nó là nghỉ ngơi bên trên đầu của phần tử main. Header sẽ tiến hành phim hoạt hình lúc chúng ta cuộn website xuống.

Để giải quyết trọng trách đầu tiên, bọn họ thêm 1 thuộc tính padding-top vào bộ phận main. Giá trị của trực thuộc tính này yêu cầu bằng cùng với độ cao của header. Trong trường vừa lòng của họ, chúng ta vẫn chưa cấu hình thiết lập một độ cao thắt chặt và cố định mang lại header của họ, vì thế họ đang áp dụng một số trong những JavaScript để tính toán thù nó, với tiếp đến thêm padding tương xứng vào trong thành phần main.

Để giải quyết và xử lý trách nhiệm máy hai, chúng ta sẽ làm cho mọi sản phẩm sau đây:

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

JavaScript

Dưới đấy là những mã JavaScript quan trọng - bọn họ bước đầu bằng cách khẳng định một vài vươn lên là, tính chiều cao của header, sau đó đính quý giá đó đến padding-top của thành phần main:

var m = document.querySelector("main"), h = document.querySelector("header"), hHeight;function setTopPadding() hHeight = h.offsetHeight; m.style.paddingTop = hHeight + "px";Để minc hoạ, bọn họ thực hiện những nằm trong tính offsetHeight để lấy chiều cao của header. Hãy nhớ rằng chúng ta cũng có thể làm cho tương tự bằng cách sử dụng phương thơm thức getBoundingClientRect(). Cần chú ý rằng cách làm này rất có thể trả về những quý hiếm thập phân.

Xem thêm: Nhiệm Vụ Của Giám Đốc Tài Chính, Chức Năng Và

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

function onScroll() window.addEventListener("scroll", callbackFunc); function callbackFunc() var y = window.pageYOffset; if (y > 150) h.classList.add("scroll"); else h.classList.remove("scroll"); Tại trên đây chúng ta tận dụng thuộc tính pageYOffphối để tính toán thù số pixel cơ mà trang của họ đang cuộn. Lưu ý rằng trực thuộc tính này không chuyển động trong những phiên bản IE cũ (tại đây.

Xem thêm: Làm Sao Để Xóa Tin Nhắn Trên Messenger : 15 Bước (Kèm Ảnh), Cách Xóa Tin Nhắn Trên Messenger Đơn Giản Nhất

Sau kia, họ áp dụng trực thuộc tính classList nhằm thêm cùng sa thải lớp scroll khỏi header của bọn họ. Không nên tất cả các trình chú ý đông đảo cung ứng ở trong tính này, bởi vậy giả dụ bạn có nhu cầu cung cấp ngẫu nhiên trình chú tâm như thế nào hãy nhìn qua các polyfill classList.js với classie.js. ví dụ như, bạn cũng có thể áp dụng thuộc tính className để điều khiển và tinh chỉnh class 1-1 của bọn họ, nhưng trong một ngôi trường hòa hợp thực tiễn điều này có thể không phải là 1 trong những chiến thuật lphát minh (trong trường đúng theo họ có không ít lớp).

Để tổng hòa hợp rất nhiều lắp thêm, bọn họ hotline những hàm của bọn họ vào hai ngôi trường hòa hợp khác nhau:

khi website được nạp với Khi họ thay đổi kích cỡ hành lang cửa số trình chuẩn y.

window.onload = function() setTopPadding(); onScroll();;window.onrekích cỡ = function() setTopPadding();;

CSS

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

.scroll box-shadow: 0 7px 0 0 rgba(0, 0, 0, .1);.scroll .hình ảnh padding: 10px 20px; font-size: 1.5rem;.scroll nav align-items: center;.scroll .hình ảnh,.scroll ul,.scroll .toggle-thực đơn margin: 0;Cụ thể, chúng ta tạo nên các chuyển đổi sau:

Thêm một nhẵn đổ vào header. Giảm padding và kích thước fonts chữ của biệu tượng công ty. Ttốt thay đổi bài toán thu xếp các thành phần flex theo cross-axis (trục dọc). Xoá margin khỏi logo, menu, với nút ít link.

Các thuộc tính nói bên trên dẫn mang lại cách bố trí header bắt đầu này:

*

Tạo kỹ năng thỏa mãn nhu cầu (Responsive)

Nhỏng chúng ta vẫn nhắc trong phần trước, Lúc chiều rộng viewport nhỏ dại hơn 1061px, bọn họ ẩn menu và hiển thị nút links (nhưng ko đích thực có tác dụng bất kể điều gì). Thêm vào kia, họ tạo thành một số rứa đổi khác trong các bộ phận đích.