Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > [Sharecode] Tạo Fixed Navigation Bar khi cuộn chuột
[Sharecode] Tạo Fixed Navigation Bar khi cuộn chuột
Nguyễn Trung Hiếu
Share Code Web Company 2018

[Sharecode] Tạo Fixed Navigation Bar khi cuộn chuột

Ngày 12 tháng 08 năm 2018, sharecodeweb chia sẻ với các bạn một code tạo fixed navigation bar cực đẹp chỉ với một vài đoạn HTML, CSS và Jquery đơn giản.

Demo ảnh

fixed navigation bar when scroll

Nguyên liệu trong bài

Tập tin HTML index.html

Trong tập tin này, ta tạo 2 section:

  • section landing-page: Dùng hiển thị cover ảnh của trang
  • section content: Dùng để hiển thị nội dung của trang

Trong đó, landing-page sẽ gồm một thẻ h1 và một tổ hợp thẻ ul để tạo menu. Tham khảo code bên dưới:

Section content các bạn có thể điền bất cứ nội dung gì các bạn muốn. Có thể lấy mã nhúng Youtube, mã nhúng Facebook như bài share code web game Gta 5 chả hạn..

Tập tin fixed.css

Đầu tiên là thiết lập một số thông tin cơ bản về font cho các thẻ body và thẻ a

Thêm một class .fixed. Đây là class khi scroll chuột ta sẽ dùng jquery để thêm vào thẻ nav bên trên.
Ở class này ta sử dụng thuộc tính position:fixed để gắn cố định khi cuộn chuột xuống.

Một vài dòng CSS cho phần menu navigation của chúng ta. Ta sử dụng thuộc tính position:absolute cho phần tử nav. Thuộc tính display:inline-block cho phần tử li nhằm dàn hàng ngang thanh navigation.

Tiếp theo là làm phần cover ảnh cho trang web. Xem lại thuộc tính background-size: cover; đã được dùng nhiều cho bài share code game GTA 5 trên nhé.

Tham khảo lại thuộc tính transform tại đây.
Cuối cùng là đoạn resize theo kích thước màn hình nếu cần

Cần thêm đoạn Jquery để chạy tốt

Đoạn jQuery đơn giản kiểm tra nếu scroll chuột vượt qua độ cao màn hình thì sẽ gán class fixed, ngược lại sẽ remove class fixed. Trong đó, dòng số 3 phải trừ đi 70 đơn vị vì chiều cao của menu chúng ta set bên trên là 70. Do đó, tùy vào trang của bạn thì thay đổi số này cho hợp lý nhé.

Tổng kết và share code fixed navigation

Dưới đây là code hoàn chỉnh. Chỉ có 2 tập tin thôi nên mình ngại nén và chia sẻ file, các bạn tham khảo luôn nhé.

Và…..

Chúc các bạn thành công!

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}
%d bloggers like this: