Hướng dẫn tạo sticky header, header trượt khi cuộn trang

Bạn nào muốn header của mình cũng trượt theo mỗi khi mình cuộn trang, cùng theo dõi hướng dẫn sau đây nhé.

Bạn sẽ học cách:

• Làm cho tiêu đề dính của bạn trong suốt
• Sử dụng CSS để tạo chuyển tiếp hoạt hình 
• Thay đổi chiều cao tối thiểu khi cuộn

---

1. Chuyển đến Templates > Theme Builder > Header và chỉnh sửa mẫu tiêu đề của bạn.
2. Nhấp chuột phải vào phần xử lý của phần đầu để chỉnh sửa phần.
3. Trong bảng điều khiển, đi đến Advanced > Motion Effects.

Nâng cao

Hiệu ứng chuyển động

1. Sticky : Nhấp vào Trên cùng để chọn gắn tiêu đề lên trên cùng. Các tùy chọn khác bao gồm Dưới cùng hoặc Không có.
2. Sticky on : Chọn thiết bị nào để dán tiêu đề, bao gồm Máy tính để bàn, Máy tính bảng và Di động.
3. Offset : Đặt số lượng pixel được cuộn trước khi tiêu đề trở nên dính.
4. Effects Offset : Đặt số lượng pixel được cuộn trước khi các hiệu ứng tiêu đề diễn ra.

Lưu ý : Tùy chọn Offset Effects chỉ hoạt động khi CSS tùy chỉnh được áp dụng.

CSS tùy chỉnh

Thêm CSS tùy chỉnh của riêng bạn ở đây. Dưới đây là một ví dụ về CSS thay đổi màu nền, độ trong suốt và chiều cao của tiêu đề, với hiệu ứng hoạt hình dễ dàng. 

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

Lưu ý : CSS này sẽ có hiệu lực khi người dùng đã cuộn số pixel được chỉ định trong tùy chọn Offset.

[related_posts_by_tax posts_per_page="6" title="Bài liên quan" taxonomies="category,post_tag"]