Tìm kiếm nhanh

[Help] Giúp ghim thanh menu cố định khi kéo site xuống

Thảo luận trong 'Hỗ trợ giao diện, block' đăng bởi suphan, 11/07/2016 04:11.

  • suphan

    suphan Phan Phan

    Các bác hướng dẫn em với cố định thanh menu khi kéo site xuống với nhé.

    Em cảm ơn nhiều.

     

     
  • dangdinhtu

    dangdinhtu Đặng Đình Tứ

    Điều hành viên Quản trị diễn đàn

    Ý bạn là cố định nó luôn luôn ở vị trí top à. thực hiện trên theme default ?

    có phải giống như trang này không  http://chomongcaionline.vn/

     
    Lần sửa cuối bởi bạn: 11/07/2016 04:21
  • suphan

    suphan Phan Phan

     

    Đúng vậy đó bác.

    Mong bác hướng dẫn giúp em với nhé.

     

     
  • dangdinhtu

    dangdinhtu Đặng Đình Tứ

    Điều hành viên Quản trị diễn đàn

    của bạn đây

    https://getbootstrap.com/examples/navbar-fixed-top/

     
    suphan thích điều này.
  • suphan

    suphan Phan Phan

    Cảm ơn bác nhé

     
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    Có thể bạn dùng cách này:

    Mở file: header_extended

    tìm đến đoạn:

    <nav class="second-nav" id="menusite">
    			<div class="container">
    				<div class="row">
                        <div class="bg box-shadow">
    					[MENU_SITE]
                        </div>
    				</div>
    			</div>
    		</nav>

    Thay toàn bộ bằng:

    <nav class="stickymenu">
             <div class="container">
    				<div class="row">
                   [MENU_SITE]
                </div>
             </div>
          </nav>
          <script type="text/javascript">
       $(function() { 
        var sticky_navigation_offset_top = $('.stickymenu').offset().top;
        var sticky_navigation = function(){
            var scroll_top = $(window).scrollTop();
            if (scroll_top > sticky_navigation_offset_top) { 
                $('.stickymenu').css({ 'position': 'fixed', 'z-index': 1000,'top':0, 'left':0});
            } else {
                $('.stickymenu').css({ 'position': 'relative' }); 
            }   
        };
        sticky_navigation();
        $(window).scroll(function() {
             sticky_navigation();
        });
    });
       </script>

    Mở file style.css thêm class css cho nó:

    .stickymenu {
        z-index: 1000;
        box-shadow: 0 10px 10px rgba(0,0,0,0.55);
        background: #0855a1;
        margin: 0 auto 0;
        width: 100%;
    }

     

     
    suphan thích điều này.
  • khanhvtth

    khanhvtth Ma Khánh Hưng

    Làm kiểu anh Hoàng Long nó bị lệch menu khi kéo xuống dưới anh ạ.

     

Chia sẻ trang này

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây