Vấn đề đã được giải quyết: Điều hướng trên cuộn

Một thách thức mà chúng tôi phải đối mặt gần đây là chúng tôi cần tạo một điều hướng chỉ hiển thị khi cuộn lên.

Chúng tôi đã giải quyết nó như thế nào?

Đầu tiên, HTML cho biểu mẫu đã được tạo. Hãy nhớ rằng trong khi tạo biểu mẫu, Bootstrap đã được sử dụng. Ở đây chúng tôi đã giải quyết vấn đề bằng cách sử dụng CSS và jQuery.

Một số thuộc tính CSS hữu ích nên học là kích thước phông chữ tương đối , cột , vị trí tương đối và tuyệt đối . Bây giờ, chúng ta hãy tiếp tục.

Sau đó, chúng tôi tạo điều hướng tĩnh và điều hướng sẽ xuất hiện khi cuộn lên.

<nav class="main-navigation navbar navbar-expand-lg">
  <a class="navbar-brand" href="/"></a>
  <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current) </span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">First link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Second link</a>
      </li>
    </ul>
  </div>
</nav>

Chúng tôi đã tạo hai điều hướng giống hệt nhau , bên dưới cái kia. Sự khác biệt là: một cái sẽ xuất hiện khi cuộn lên và có nền khác, trong khi cái kia sẽ tĩnh ở đầu trang.

Để làm được điều này, các điều hướng này phải có các số nhận dạng khác nhau .

Điều hướng xuất hiện trên cuộn có một lớp  .navigation-bar-scroll, trong khi điều hướng tĩnh có một lớp với tên khác để các kiểu không bị trộn lẫn.

Chúng tôi đã sử dụng SCSS sau cho điều hướng xuất hiện trên cuộn:

.navigation-bar-scroll {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;

  &.is-hidden {
    opacity: 0;
    -webkit-transform: translate(0,-60px);
    transition: .5s ease;
  }

  &.is-visible {
    opacity: 1;
    -webkit-transform: translate(0,0);
    transition: .5s ease;
  }
}

Sau đó, chúng tôi sử dụng mã jQuery sau để triển khai chức năng "hiển thị khi cuộn lên".

   var previousScroll = 0;

   $(window).scroll(function(){

     var currentScroll = $(this).scrollTop();

     if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()){

       if (currentScroll > previousScroll){
         window.setTimeout(hideNav, 300);

       } else if (currentScroll == previousScroll) {
         window.setTimeout(visibleNav, 300);
       }
        else {
         window.setTimeout(showNav, 300);
       }

       previousScroll = currentScroll;
     }

     /* make the scroll navigation disappear when it is scrolled on top */

     if ($(window).scrollTop() <= 150) {
         $('#navigation-scroll').css('display', 'none');
     } else {
       $('#navigation-scroll').css('display', 'flex');
     }

   });

   function hideNav() {
     $(".main-navigation-scroll").removeClass("is-visible").addClass("is-hidden");
   }
   function showNav() {
     $(".main-navigation-scroll").removeClass("is-hidden").addClass("is-visible");
     $(".main-navigation-scroll").addClass("shadow");
   }

 });

Chúng tôi đã đạt được hiệu ứng của  điều hướng xuất hiện khi cuộn lên . Thanh điều hướng này sẽ biến mất khi cuộn lên đầu trang, trong khi thanh điều hướng tĩnh thứ hai sẽ nằm ở đầu trang. Trông khá tuyệt phải không?

Đây là mẹo cuối cùng của chúng tôi: các điều hướng phải giống nhau để người dùng không bị nhầm lẫn. Sự khác biệt duy nhất bạn có thể thêm là màu nền khác cho điều hướng xuất hiện khi cuộn lên, vì vậy các liên kết của điều hướng vẫn hiển thị rõ ràng trên trang có nhiều nội dung.

Đây chỉ là một trong nhiều cách bạn có thể cải thiện thiết kế trang web của mình .

Hy vọng bạn thấy bài đăng blog ngắn này hữu ích!

Cảm ơn bạn đã đọc!