Cách tạo Menu cố định khi Scroll chuột

Cập nhật: 18/06/2019

Để tạo Menu cố định khi Scroll chuột (tức là cuộn chuột, kéo chuột xuống đó), bạn có thể sử dụng Plugin Sticky Menu (or Anything) on Scroll

Plugin này không chỉ Sticky Menu mà còn Sticky được bất cứ thành phần nào trên web khi cuộn chuột.

Bước 1. Cài đặt và kích hoạt plugin Sticky Menu (or Anything) on Scroll

themevi-menu-co-dinh-scroll-chuot1-min

Bước 2. Bấm vào Settings (Cài đặt, Thiết lập) > Sticky Menu

và bên phải sẽ hiện ra các tùy chọn để Sticky Menu khi Scroll chuột

themevi-sticky-menu1-min

Bước 3. Thiết lập Sticky Menu khi scroll (cuộn) chuột

  • Sticky Element: Thẻ HTML hoặc Class/ID của Menu hoặc phần tử cần Sticky. Thông thường Menu, Logo sẽ có Class là Site-Header, vậy nên bạn chỉ cần điền .site-header để nó sticky menu. (có dấu chấm đằng trước nhé)
  • Space between top…: Khoảng cách giữa phần trên cùng của web và menu sticky
  • Check for Admin Toolbar: Nếu bạn đăng nhập tài khoản Admin, Menu Sticky sẽ được dịch chuyển xuống dưới thanh màu đen Admin 1 ít.
  • Do no stick element when screen smaller than: Không sticky khi màn hình nhỏ hơn bao nhiêu Pixel (Px) đó.
  • Do no stick element when screen larger than: Không sticky khi màn hình lớn hơn bao nhiêu Pixel đó

Màn hình điện thoại: 479px trở xuống

Màn hình máy tính bảng: 480px – 990px

Màn hình máy tính: 991px trở lên

Đây là thông số kích thước phổ biến cho 3 loại màn hình.

themevi-sticky-menu2-min

Với Menu thì bạn chỉ cần điền .site-header (dấu chấm phía trước). Vì hầu hết logo, menu các theme thông dụng đều nằm trong Class này.