Code Sticky Menu bằng js trong wordpress không dùng Plugin

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi seolagi, 4/11/20.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    812
    Đã được thích:
    70
    Điểm thành tích:
    28
    Bạn nào cho mình hỏi, có cách nào Sticky Menu bằng js trong wordpress không dùng Plugin không vậy? hiện tại m xài mấy plugin nó toàn dư css bực mình ghê, có code nào cài bằng tay js sticky menu không? cho mình xin cái code hoặc đường dẫn với, cảm ơn.
     
    Cảm ơn đã xem bài:

    Code Sticky Menu bằng js trong wordpress không dùng Plugin

  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,485
    Đã được thích:
    1,078
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Hầu như tất cả các web của mình dù là wordpress hay asp hay php mình đều xài chung code sticky menu chuẩn ở link dưới, bạn truy cập vào xem cách add vô nhé, rất đơn giản và hiệu quả, rất ít code không gây nặng cho web.

    Tự code tay:
    Chèn code js sau vào web
    HTML:
    <div class="header">
      <div id="idmenu">
        Nội dung cần sticky ơ rđây
      </div>
    </div>
    Mã:
    //jQuery(document).ready( function(){
    $(document).ready(function () {
        window.onscroll = function () { myFunction() };
        try {
            function myFunction() {
                var navbar = document.getElementById("idmenu");
                var sticky = navbar.offsetTop;
                var width = document.body.clientWidth;
                if (window.pageYOffset >= sticky && width > 767) {
                    navbar.classList.add("sticky");
                } else {
                    navbar.classList.remove("sticky");//nếu bị lỗi nháy nháy trên chorme thì xóa đoạn code này đi. (không cần hàm remove)
                }
            }
        }
        catch (err) {alert(err); }
    });
    
    Chèn code css sau vào:
    HTML:
    .sticky {
      position: sticky !important;
      top: 0;
      width: 100%;
    }
    
    Plugin thì xài em sau khá ổn:
    Nếu position: sticky không hoạt động thì đọc bài sau để xử lý: https://itseovn.com/threads/sua-loi...hoat-dong-position-sticky-not-working.322809/
     
    Chỉnh sửa cuối: 26/8/21
    seolagi thích bài này.
  3. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    812
    Đã được thích:
    70
    Điểm thành tích:
    28
    Dạ cảm ơn ạ, em đang vô xem rồi, thấy ít code trang của w3schools thì chuẩn 100% rồi ạ.
     


Like và Share ủng hộ ITSEOVN