Cấp bậc tác giả:

HTML

Hướng dẫn làm menu cố định, di chuyển theo thanh trượt

Được viết bởi webmaster ngày 04/05/2017 lúc 08:59 AM
Bài viết này sẽ hướng dẫn cách làm thế nào để cố định vị trí di chuyển.
  • 0
  • 13018

Hướng dẫn làm menu cố định, di chuyển theo thanh trượt

Định dạng - Kiểu Style
    <style> 
         .navbar-fixed-top {
    top: -60px;
    transition: top 800ms ease 0s;
    position: fixed;
    z-index: 9999;
}
        .show {
            top: 0px;
        }
   
    </style>
Code HTML để hiển thị giao diện
<div id="nav">
Menu nằm ở đây
</div>
<div>Nội dung nằm bên dưới trang</div>

Đoạn mã Script để xử lý
 <script src="https://code.jquery.com/jquery-1.12.1.min.js" type="text/javascript"></script>
      
      <script>
          /* -------------------------------------------------------------------------*
          * STICKY NAVIGATION
          * -------------------------------------------------------------------------*/
          $(window).scroll(function () {
              if ($(window).scrollTop() >= 99) {
                  $('#nav').addClass('navbar-fixed-top');
              }


              if ($(window).scrollTop() >= 100) {
                  $('#nav').addClass('show');
              } else {
                  $('#nav').removeClass('show navbar-fixed-top');
              }
          });
</script>

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML