Hướng dẫn tạo Sticky và Collapse Header bằng JS, CSS

Sticky và Collapse là hai hiệu ứng được dùng khá phổ biến cho Header của trang web. Sticky là hiệu ứng khi người dùng cuộn xuống thì Header được giữ đứng yên ở phía trên (fixed top) để tiện truy cập. Gần giống như vậy, Collapse là hiệu ứng Header sẽ được thu nhỏ lại (mà vẫn fixed top) khi người dùng cuộn trang xuống dưới, mục đích là tiết kiệm diện tích, nhìn cho thoáng. Hãy cùng MyLớp.edu.vn tìm hiểu cách tạo ra hai hiệu ứng này thuần túy bằng CSS và JavaScript mà không cần dùng tới jQuery nhé!

Hướng dẫn tạo Sticky Header bằng JS

Sticky Header Demo   Download Files

Bước 1) Tạo phần tử Header cho trang web bằng HTML:

HTML Code:
1
<div class="header">...</div>

Bước 2) Tạo CSS để định vị Header cũng như tạo class .sticky để giữ Header cố định khi cuộn trang xuống dưới:

CSS Code:
1
2
3
4
5
6
7
8
9
.sticky {
	position: fixed;
	top: 0;
}
.header {
	width: 100%;
	background: #F6D565;
	padding: 15px 0;
}

Bước 3) Chèn code JavaScript để điều khiển

Hãy chèn đoạn code JavaScript sau, nhớ là phải chèn vào bên dưới cùng của mã nguồn HTML, bên trên thẻ đóng </body> nhé:

JavaScript Code:
1
2
3
4
5
6
7
8
9
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
 
function onScroll(e) {
	window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                  header.classList.remove('sticky');
}
 
document.addEventListener('scroll', onScroll);

Giải thích các đoạn code.

JavaScript Code:
1
var header = document.querySelector('.header');

Đoạn này truy vấn phần tử Header có class là .header và lưu vào biến header

JavaScript Code:
1
var origOffsetY = header.offsetTop;

Tính vị trí đỉnh trên cùng (offsetTop) của phần tử Header, lưu vào biến origOffsetY

JavaScript Code:
1
document.addEventListener('scroll', onScroll);

Lắng nghe sự kiện scroll, khi người dùng cuộn trang, gọi hàm onScroll ra xử lý.

JavaScript Code:
1
2
3
4
function onScroll(e) {
	window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                  header.classList.remove('sticky');
}

window.scrollY trả về vị trí hiện tại của thanh cuộn (theo chiều dọc). Nếu vị trí này lớn hơn vị trí đỉnh lúc đầu của Header (origOffsetY), tức là người dùng cuộn vượt quá tầm nhìn của Header thì ta sẽ để Header fix cứng lên đỉnh trang bằng cách thêm vào class .sticky bằng lệnh header.classList.add(‘sticky’)

Trường hợp ngược lại, ta reset để Header trở về vị trí mặc định như lúc đầu bằng cách bỏ đi class .sticky bằng lệnh header.classList.remove(‘sticky’)

Tất cả các lệnh này đều có sẵn trong JavaScript phiên bản mới đây (cùng với HTML5 và CSS3) nên các bạn không cần phải dùng đến jQuery làm gì.

Hướng dẫn tạo Collapse Header bằng JS

Collapse Header Demo   Download Files

Việc tạo hiệu ứng Collapse Header cũng gần giống như việc tạo hiệu ứng Sticky Header, bạn làm theo các bước sau.

Bước 1) Tạo phần tử Header cho trang web bằng HTML:

HTML Code:
1
<div class="header">...</div>

Bước 2) Tạo CSS để định vị Header cũng như tạo class .collapse để thu nhỏ Header khi cuộn trang xuống dưới:

CSS Code:
1
2
3
4
5
6
7
8
9
10
11
.collapse {
	height: 40px !important; /* Chiều cao khi thu nhỏ */
}
.header {
	position: fixed;
	top: 0;
	width: 100%;
	background: #F6D565;
	height: 110px; /* Chiều cao mặc định */
	transition-duration: .5s;
}

Trong VD này, khi thu nhỏ, Header sẽ giảm chiều cao từ 110px về 40px. Bạn có thể tùy chỉnh chiều cao cũng như các hiệu ứng khác tùy thích.

Bước 3) Chèn code JavaScript để điều khiển:

JavaScript Code:
1
2
3
4
5
6
7
8
var header = document.querySelector('.header');
 
function onScroll(e) {
	window.scrollY >= 200 ? header.classList.add('collapse') :
                                  header.classList.remove('collapse');
}
 
document.addEventListener('scroll', onScroll);

Nếu người dùng cuộn trang xuống quá khoảng 200px, ta sẽ thu nhỏ Header lại.

Tham khảo, từ khóa để tìm kiếm:

Scroll Event
– Sticky Header, Sticky Header jQuery, Sticky Header JavaScript, Sticky Effect…

Trên đây là hai hiệu ứng khá phổ biến và hiệu quả với Header mà bạn có thể vận dụng vào các trang web. Từ logic của hai hiệu ứng này, bạn có thể tự tạo ra những hiệu ứng cho riêng mình bằng cách xử lý sự kiện scroll của trình duyệt. Chúc các bạn thành công!

Cheers,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Bình luận

2 thoughts on “Hướng dẫn tạo Sticky và Collapse Header bằng JS, CSS

  1. Tôi cũng có một menu như sticky nhưng khi cuộn xuông hay cuộn lên thì menu bị kéo lên hoặc xuống theo nôi dung trang khi thả ra thì menu mới trở về top. Làm sao sửa nó đứng yên như demo trên (tôi là ‘dân copy dán’ nên không biết biết sửa). Please giúp tôi sửa nó !

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website