Cố định header khi cuộn trang html
|
Quản trị dự án Hiệu ứng cố định header khi cuộn trang bằng html css jquery | Unitop.vn07/03/2021 admin Lộ trình thực hiện dự án Hiệu ứng cố định header khi cuộn trang bằng html css jquery | Unitop.vn
————————– #unitop #hocwebdilam Bạn muốn menu của mình luôn cố định khi người dùng kéo trang trong wordpress. Hình thức này giúp cho khách dễ dàng di chuyển website của bạn và không còn mất thời gian để tìm thấy menu để chuyển sang mục khác. Làm thế nào để cố định menu khi cuộn trang trong wordpress, hãy cùng Nhân Hòa tìm hiểu ngay sau đây nhé. Đã có rất nhiều wesite thực hiện cách này để tạo ra một giao diện thân thiện và giữ chân khách hàng. Hãy cùng tìm hiểu chi tiết các bước cố định menu khi cuộn trang trong wordpress nhé! + Việc đầu tiên để thực hiện, bạn hãy đăng nhập vào trang Dashboard của WordPress. Tiếp theo đó, tại menu plugin, nhấn chọn “Add New”. + Ở thanh công cụ tìm kiếm, nhập tên plugin “Sticky Menu (or Anything!) on Scroll” và nhấn “OK”. Hệ thống sẽ trả về những kết quả có liên quan đến tên plugin bạn vừa tìm kiếm.  + Sau khi đã cài đặt và kích hoạt thành công plugin trên, việc quan trọng nhất bạn cần làm đó chính là Sticky Element. + Bằng cách di chuyển đến mục Settings và lựa chọn ô Sticky Menu (or Anything!). Bạn hãy sử dụng tính năng Inspect trong trình duyệt để tìm được ID. + Duyệt bất kỳ trang web nào và nhấp vào chuột phải, tiếp đó là Inspect từ menu ngữ cảnh. + Để tìm ra đoạn code HTML của menu, hãy tick vào mũi tên để bắt đầu. + Kéo chuột trở lại menu, lúc này màn hình sẽ hiển thị code HTML của menu cần cố định. + Bạn sao chép giá trị của thuộc tính có tên là id và dán vào phần cấu hình của plugin. Lưu ý: Hãy nhớ thêm ký tự “#” trước tên của thuộc tính. Chỉ với 3 bước đơn giản, phần tùy chọn Sticky Element đã xong và việc cố định menu khi cuộn trang trong wordpress đã được hoàn thành. Xem thêm: Đăng Ký Mua Hosting Giá Rẻ #Số 1 Việt Nam 2. Sử dụng Code CSS để cố định menu khi cuộn trang trong wordpressBạn cũng có thể bổ sung thêm code CSS để thực hiện thiết lập cố định menu khi cuộn trang trong wordpress nếu không muốn sử dụng plugin. #site-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; } + Hãy thay đổi giá trị #site-navigation bằng CSS ID của bạn (CSS ID là giá trị bạn xác định ở bước trên) + Bạn nên bổ sung thêm không gian so với phần top của trang để tránh trường hợp menu cố định đè lên phần tiêu đề và header, bằng cách sao chép đoạn code sau: .site-branding { margin-top:60px; } Xem thêm: Css là gì? công dụng, chức năng và hướng dẫn sử dụng chi tiết Với nội dung bài viết trên đây của Nhân Hòa, bạn có thể cài đặt thêm hiệu ứng cho website một cách dễ dàng. Hy vọng với hướng dẫn cố định menu khi cuộn trang trong WordPress trên sẽ giúp được bạn. Có gì thắc mắc hãy comment bên dưới để chúng ta cùng nhau giải quyết nhé. Chúc bạn thành công! Hosting cho Wordpress thực sự là một lựa chọn tuyệt vời cho Website Wordpress của bạn. Bạn nên thuê hosting tại những địa chỉ uy tín như Nhân Hòa để nhận được tư vấn miễn phí và các ưu đãi về giá đối với khách hàng mới và khách hàng lâu năm. Bảng giá chi tiết dịch vụ đã được Nhân Hòa cập nhật. Chúc bạn sớm tìm được giải pháp mạng phù hợp với nhu cầu phát triển của doanh nghiệp. Trân trọng! Menu cố định khi cuộn trang hay còn gọi là Floating menu giúp website của bạn chuyên nghiệp và đẹp mắt hơn. Trong bài viết này Vnkings sẽ giúp các bạn tự tạo cho mình 1 menu cố định như thế. – Đầu tiên bạn cần xác định Class hay ID đang chứa menu: Với Trang Vnkings của mình, class của Menu cần cố định chính là : head_nav – Tiếp đến bạn thêm đoạn Javascript này vào bất kỳ đâu trong cặp thẻ body :
Lúc này hãy thử kiểm tra code khi cuộn trang đã thêm Class Fix – Tiếp theo bạn cần CSS cho class Fix này giúp Menu luôn ở vị trí đầu của trang : .head_nav.fix {
left: 0;
max-width: 100%;
overflow: visible;
position: fixed !important;
top: 0;
width: 100%;
z-index: 1000;
}
Bây giờ các bạn ra trang web của mình và F5 thử xem thành công chưa nhé Demo https://wordpress.vnkings.com Chúc các bạn thành công! |
