Hướng dẫn Tạo sticky cho navbar XenForo (Menu luôn đứng yên khi cuộn trang)

Thảo luận trong 'JavaScript/jQuery' bắt đầu bởi Blue, 14/03/2017.

  1. Blue

    Blue Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    796
    Đã được thích:
    1,246
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Thấy có nhiều bạn muốn làm cho Menu top của diễn đàn mình luôn đứng yên khi cuộn trang web xuống nhưng chưa làm được do cách thực hiện quá phức tạp đối với những ai không rành jquery. Hôm nay mình đã tìm ra 1 cách rất đơn giản (đang áp dụng cho VNXF) để làm việc này, đó là sử dụng thư viện jsticky của jquery, các bạn chỉ cần copy đoạn mã bên dưới dán vào template footer là xong.

    Mã:
    
    
    Đối với XenForo 2, đoạn mã sẽ thay đổi như sau:
    Mã:
    
    
        $(document).ready(function(){
            $(".p-nav").css({
               width: '100%'
            });
            $(".p-nav").sticky({
                top: 0,
                zIndex: 111
            });
        });
    
    Nếu file js được up lên hosting của bạn thì link nó sẽ dạng:


    Code này có thể áp dụng với mọi trang web chứ không riêng gì XenForo, và có thể áp dụng vào cả các khu vực khác, ví dụ banner cuối cùng cột phải của vnxf.vn.

    Mấu chốt của code này là đoạn #header, nếu các bạn có thể xem được code html thì đó chính là chữ header trong code menu bên dưới:

    Mã:
    id="header" thì ở code jquery trên sẽ là #header
    Nếu class="classheader" thì code query trên sẽ là .classheader.

    Mã:
    Ví dụ banner cuối cột phải của vnxf.vn là code trên thì code sticky sẽ là:

    Mã:
    Chúc các bạn thử nghiệm thành công!

    Blue VNXF
     
    Bài viết mới
    Chỉnh sửa cuối: 26/07/2018
    aviaiva, phamquangquyen, PVS and 3 others like this.
  2. tuna

    tuna Thượng Đế

    Tham gia:
    30/01/2017
    Bài viết:
    641
    Đã được thích:
    246
    Điểm thành tích:
    43
    Giới tính:
    Nam
    quá tuyệt, thank a blue :D
     
    THB thích bài này.
  3. tuna

    tuna Thượng Đế

    Tham gia:
    30/01/2017
    Bài viết:
    641
    Đã được thích:
    246
    Điểm thành tích:
    43
    Giới tính:
    Nam
    khi nào a blue sửa lại cái add on bbcode share lock cho xen1.5 đi ạ, có gì ae đóng ghóp :v
     
    THB thích bài này.
  4. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    @Blue nhanh như điện. haaa
     
  5. tuna

    tuna Thượng Đế

    Tham gia:
    30/01/2017
    Bài viết:
    641
    Đã được thích:
    246
    Điểm thành tích:
    43
    Giới tính:
    Nam
  6. pdinh97qng

    pdinh97qng Thượng Đế

    Tham gia:
    12/05/2015
    Bài viết:
    235
    Đã được thích:
    210
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Kakaka, liên hệ hết rồi, kể cả brivium :)
     
    THB and tuna like this.
  7. tuna

    tuna Thượng Đế

    Tham gia:
    30/01/2017
    Bài viết:
    641
    Đã được thích:
    246
    Điểm thành tích:
    43
    Giới tính:
    Nam
    vậy chờ vậy :v
     
    THB thích bài này.
  8. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    lại có cái mới để vọc =))
     
    THB thích bài này.
  9. tuna

    tuna Thượng Đế

    Tham gia:
    30/01/2017
    Bài viết:
    641
    Đã được thích:
    246
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Anh @Blue cho em hỏi nếu muốn nó trượt tới hết #1 là không trượt nữa thì làm thế nào ạ, hiện tại thì em chỉ biết edit để nó trượt tới footer thôi, như vậy thì hơi dài :D
     
    THB thích bài này.
  10. hoanghuutai39

    hoanghuutai39 Thượng Đế

    Tham gia:
    29/11/2017
    Bài viết:
    13
    Đã được thích:
    5
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    Đà Nẵng
    AD hướng dẫn khi làm trên bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365 2 với, xen 2 tìm không ra tamplate footer
     
    THB thích bài này.
  11. tuna

    tuna Thượng Đế

    Tham gia:
    30/01/2017
    Bài viết:
    641
    Đã được thích:
    246
    Điểm thành tích:
    43
    Giới tính:
    Nam
    a @Blue ơi cho em hỏi ạ,
    có thể nào làm cho 2 widget trượt đc ko ạ, ví dụ widget 1 trượt tới stopper 1 thì dừng và widget 2 trượt tới stopper 2
     
    THB thích bài này.
  12. phamquangquyen

    phamquangquyen Thượng Đế

    Tham gia:
    22/01/2018
    Bài viết:
    45
    Đã được thích:
    7
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    Cau Giay, Ha Noi
    Em vào footer template, rồi copy đoạn code này vào cuối phần này




    Xong ra ngoài, truy cập em vẫn thấy nó ở phía dưới, nhờ các a trợ giúp với. Em xin cảm ơn!
    upload_2018-3-28_15-30-53.png
     
    THB thích bài này.
  13. lanhhuyettu

    lanhhuyettu Thượng Đế

    Tham gia:
    10/03/2015
    Bài viết:
    196
    Đã được thích:
    108
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Web:
    Mình thấy cứ sử dụng dòng code này cho tiện :D
    Mã:
    #navigation
     {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1030;
    }
     
    THB and phamquangquyen like this.
  14. Blue

    Blue Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    796
    Đã được thích:
    1,246
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Update: Code dành cho XenForo 2
     
    THB thích bài này.
  15. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,892
    Đã được thích:
    1,449
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    @Blue sao không dùng luôn CDN đi anh, tiện hơn là up lên host :D
    HTML:
     
    Blue and THB like this.

Chia sẻ trang này