Hướng dẫn code menu cố định chạy theo web khi scroll chuột

Hướng dẫn code menu cố định chạy theo web khi scroll chuột

Hello các anh em, dạo gần đấy mình thấy một số anh em tìm kiếm keyword này rất nhiều. Do đó, trong bài viết này mình xin hướng dẫn các bạn cách code menu cố định chạy theo web khi scroll chuột. Nào hãy cùng Cam Ranh Media xem ngay bên dưới nhé!

>>>Quan tâm nhiều: Diễn đàn backlink mạng xã hội chất lượng<<<

Dựa theo các bước làm này bạn có thể theo đó mà tùy chỉnh vào trang web của bạn nhé

Bước 1 : Tạo hình với HTML & CSS

Trước hết thì mình cần phải xây dựng trước một cấu trúc menu với HTML

Dựa vào cấu trúc trên thì các bạn có thể thấy, menu được xây dựng có 2 cấp. Bây giờ các bạn hãy tiến hành CSS cho menu, tôi xây dựng menu này có style giống như menu đang dùng trên hotdeal

Giải thích ý nghĩa của css tôi có chú thích comment phía trong code. Các bạn có thể xem và tham khảo. Lưu ý: Các bạn nên tham khảo qua các bài viết hướng dẫn xây dựng menu để có thể hình dung rõ hơn.

Sau khi làm xong menu như trên thì các bạn đã có cho mình một cái floating menu rồi đó. Bây giờ tôi sẽ giải thích rõ hơn. Các bạn hãy quan sát trong css chổ đầu tiên, khai báo cho #fixNav.

Các bạn có thể quan sát thấy css position có giá trị là fixed. Với bất kỳ đối tượng nào được gán css position có giá trị fixed, thì sẽ được cố định tại một vị trí nhất định. Vị trí đó sẽ phụ thuộc vào giá trị top left bottom right. Trong trường hợp này tôi khai báo top và left đều bằng 0, tức nó sẽ nằm trên cùng, bên trái. Do width:100% nên menu sẽ kéo dài toàn màn hình.

Bước 2 : Tích hợp thêm jQuery

Như các bạn thấy, thì trên  Menu chỉ hiển thị khi bạn cuộn website đến một vị trí nào đó. Bây giờ thì thôi sẽ tiến hành dùng jQuery để thực hiện điều đó. Quy trình hoạt động thì sẽ như vậy: Cuộn chuột đến một móc có giá trị là 150px thì menu sẽ hiển thị ra. Các bạn hãy thêm đoạn code jQuery này vào, ý nghĩa tôi đã có comment phía trong.

Lưu ý: các bạn cần phải chèn thư viện jquery vào trước khi dùng.

Tuy nhiên, bây giờ menu vẫn chưa hoạt động. Bạn hãy quay lại css và chỉnh sửa khai báo ở đoạn #fixNav với giá trị display:block thành display:none. Nguyên nhân là chúng ta muốn menu nó ẩn từ đầu, chỉ khi cuộn chuột vượt móc giá trị nào đó nó mới hiện ra thôi.

Lời kết

Hy vọng, bài viết này sẽ giúp ích nhiều cho các bạn. Nếu trong quá trình làm gặp khó khăn gì thì liên hệ mình nhé.

Cam Ranh Media

Ý kiến bạn đọc

Đóng Menu
1
Bạn cần hỗ trợ?