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:

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:

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é:

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.

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

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

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ý.

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:

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:

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:

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,

The following two tabs change content below.

• Bio
• Latest Posts

Lục Đức Thành

Giáo viên at FPT Arena

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.

Latest posts by Lục Đức Thành (see all)

• Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
• Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
• WordPress 5 có gì mới? - 23/12/2018
• Sublime Text 3 Portable Windows 64 bit - 11/12/2017
• Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017