Ẩn hiện header khi cuộn trang

Với một trang web thì phần header tuy ngắn gọn nhưng rất quan trọng cho website đó. Trên đó bôm gồm nhưng thứ linh tinh như: menu, sơ đồ trang, trang chủ, liên hệ,... Nhưng có một số website làm phần header hơi dài vì vậy cần một thủ thuật để làm ngắn nó lại, để nhìn một cách " công nghệ" hơn thì nên tham khảo bài viết này của mình nhé

Để khắc phục vấn đề này mà người đọc vẫn có thể sử dụng được các chức năng cài đặt trong phần header ta có thể dùng cách ẩn header khi lăn chuột xuống và khi người đọc có ý định kéo lên để dùng header thì chỉ cần nhấp cuộn nhẹ là hedaer đã rơi xuống.

Bài viết này đã có nhiều người chia sẽ nhưng mình chắc đây là bài viết ngắn gọn nhất, giúp các bạn làm một cách nhanh chóng và một số bạn mới vào web cũng dễ thực hiện hơn.

Bước 1: 

Các bạn tìm ID hay class mà header sử dụng nhé, thường có các dạng:

#header-wrapper{position:fixed;top:0;left:0;........}

.header-wrapper{position:fixed;top:0;left:0;........}

.header{position:fixed;top:0;left:0;........}

Sau đó bạn thêm CSS cho nó:

-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transition-property:-webkit-transform;transition-property:transform

Thêm CSS cho mẫu

.header--hidden{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}

Bước 2:

Thêm đoạn javascript vào trước </body>

<script>
//<![CDATA[
 /*
  By Osvaldas Valutis, www.osvaldas.info
  Available for use under the MIT License
 */

 
 ;( function ( document, window, index )
 {
  'use strict';

  var elSelector  = '#header-wrapper',
   elClassHidden = 'header--hidden',
   throttleTimeout = 500,
   element   = document.querySelector( elSelector );

  if( !element ) return true;

  var dHeight   = 0,
   wHeight   = 0,
   wScrollCurrent = 0,
   wScrollBefore = 0,
   wScrollDiff  = 0,

   hasElementClass  = function( element, className ){ return element.classList ? element.classList.contains( className ) : new RegExp( '(^| )' + className + '( |$)', 'gi' ).test( element.className ); },
   addElementClass  = function( element, className ){ element.classList ? element.classList.add( className ) : element.className += ' ' + className; },
   removeElementClass = function( element, className ){ element.classList ? element.classList.remove( className ) : element.className = element.className.replace( new RegExp( '(^|\\b)' + className.split( ' ' ).join( '|' ) + '(\\b|$)', 'gi' ), ' ' ); },

   throttle = function( delay, fn )
   {
    var last, deferTimer;
    return function()
    {
     var context = this, args = arguments, now = +new Date;
     if( last && now < last + delay )
     {
      clearTimeout( deferTimer );
      deferTimer = setTimeout( function(){ last = now; fn.apply( context, args ); }, delay );
     }
     else
     {
      last = now;
      fn.apply( context, args );
     }
    };
   };

  window.addEventListener( 'scroll', throttle( throttleTimeout, function()
  {
   dHeight   = document.body.offsetHeight;
   wHeight   = window.innerHeight;
   wScrollCurrent = window.pageYOffset;
   wScrollDiff  = wScrollBefore - wScrollCurrent;

   if( wScrollCurrent <= 0 ) // scrolled to the very top; element sticks to the top
    removeElementClass( element, elClassHidden );

   else if( wScrollDiff > 0 && hasElementClass( element, elClassHidden ) ) // scrolled up; element slides in
    removeElementClass( element, elClassHidden );

   else if( wScrollDiff < 0 ) // scrolled down
   {
    if( wScrollCurrent + wHeight >= dHeight && hasElementClass( element, elClassHidden ) ) // scrolled to the very bottom; element slides in
     removeElementClass( element, elClassHidden );

    else // scrolled down; element slides out
     addElementClass( element, elClassHidden );
   }

   wScrollBefore = wScrollCurrent;
  }));

 }( document, window, 0 ));

//]]>
</script>

Lưu ý: các bạn thay #header-wrapper bằng ID or class của bạn nhé