[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.

  • maiaa

    maiaa maiaaBR maiaaBR

    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.

     

     
  • Ý 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 một điều hành viên: 11/07/2016 04:21
  • maiaa

    maiaa maiaaBR maiaaBR

     

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

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

     

     
  • của bạn đây

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

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

    maiaa maiaaBR maiaaBR

    Cảm ơn bác nhé

     
  • Yamahayuv

    Yamahayuv zwusalmeltfqdxdGP zzusafme2ntkdkxGP

    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.
  • Premiumvtd

    Premiumvtd swusafmebtizctcGP xwusalmeotjtcyzGP

    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