Genesis Sticky Header – Ẩn khi cuộn trang nhưng hiện khi cuộn lên

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Genesis Sticky Header – Ẩn khi cuộn trang nhưng hiện khi cuộn lên

Trong blog mình có những bài chỉ dẫn về dùng theme Genesis. Giờ bạn muốn giữ lại header khi cuộn trang, kỹ thuật này coi là sticky header trong WordPress Genesis

Sticky header là 1 cách tuyệt hảo để cho người truy cập điều phối thông qua trang web của bạn khi cuộn vào giữa của trang hoặc bài viết. Nó giúp các độc giả cũng có thể có thể chọn thêm menu về sản phẩm hay dịch vụ của bạn. Nhưng có 1 vấn đề.

Sticky header luôn hiện trên màn hình khi bạn cuộn xuống. Điều đây là ok nhưng nếu xem trên mobile, nó sẽ làm ảnh hưởng đến khả năng đọc.

Vậy, biện pháp là gì

Một header thông minh – là ẩn khi bạn cuộn xuống nhưng hiển thị ngay lập tức khi bạn cuộn lên.

Trong bài này mình sẽ hướng dẫn cách làm điều đó, nhưng trước lúc sửa tệp bạn hãy thi hành sao lưu trang web WordPress của 1 tập tin hiện có, do đó bạn cũng có thể có thể phục hồi khi gặp sự cố.

Thêm những đoạn code sau đây trong tập tin  functions.php

 //* Smart Header Functions add_action('wp_footer','geekflare_header_sticky_script'); function geekflare_header_sticky_script() { ?>   <?php }  

Và trong file style.css như dưới đây

 /* Smart Header */ header.site-header { position: fixed; top: 0; transition: top 0.3s ease-in-out; width: 100%; z-index: 9; left: 0; right: 0; } header.site-header.shadow { -webkit-box-shadow: 0 0 50px rgba(0,0,0,.15); box-shadow: 0 0 50px rgba(0,0,0,.15); } body.admin-bar header.site-header{ top: 32px; } @media only screen and (max-width: 780px) { body.admin-bar header.site-header{ top: 46px; } }  

Lưu tệp và upload lên hosting. Nhớ xóa cache wordpress nếu có và trình duyệt , sau đó làm mới trang để xem kết quả.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng có thể có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Genesis Sticky Header – Ẩn khi cuộn trang nhưng hiện khi cuộn lên được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang