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
- Chuyển đến Templates > Theme Builder > Headervà chỉnh sửa mẫu tiêu đề của bạn.
- Nhấp chuột phải vào phần xử lý của phần đầu để chỉnh sửa phần.
- Trong bảng điều khiển, đi đến Advanced > Motion Effects.
Nâng cao
Hiệu ứng chuyển động
- 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ó.
- 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.
- Offset: Đặt số lượng pixel được cuộn trước khi tiêu đề trở nên dính.
- 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.