Ẩn hiện header khi cuộn trang cho blogspot

Đối với blogspot cố định header trên đầu blog khi xem trang trên máy tính hay mobile không ít thì nhiều header này cũng chiếm dụng mất một ít giao diện người nhìn.

Để 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.

Chức năng này đã có trong nhiều mẫu chia sẻ nhưng ở đây chỉ cách cài đơn giản và cụ thể để mọi người không cần mất công tìm tòi.

Tại bài viết này chia sẻ 2 loại code để mọi người tham khảo tùy chọn để sử dụng.

Ẩn hiện header khi cuộn trang cho blogspot

Code 1

Bước 1
Tìm xem header của blog sử dụng ID hay class.Nó thường có 3 dạng thế này

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

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

Hoặc là

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

Ở đây header đã cố định với top:0;left:0 nên thêm css như bên dưới.
Thêm vào

-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

Nếu header không phải là cố định ở đầu blog thì phải thêm css như sau

position:fixed;top:0;left:0;-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;

Tiếp theo thêm css cho css của mẫu

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

Bước 2
Thêm javascript vào trước </body>

<script>
//<![CDATA[
 ;( 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>

Phần bôi màu vàng bạn xác định đúng class hoặc id trong mẫu blog của mình.Code tạm để là id có tính chất minh họa.

Code 2

Bước 1:
Bước 1 tương tự như bước 1 ở code 1, và cần xác định xem header ID của nó là gì. Ví dụ trong code ID là header (id='header')
Thêm vào

position: sticky;
 position: -webkit-sticky;
 top: 0px;
 z-index:9999;
 transition: top .3s ease;

Nếu có phần cố định header rồi thì chỉ cần thêm.

transition: top .3s ease

Tiếp theo thêm css cho css của mẫu

header.show{
 top: -70px;
}

Trị số -70 là chiều cao của header cần ẩn đi khi cuộn trang bạn tùy chỉnh sao cho khi cuộn header vừa đủ ẩn đi.
Bước 2:
Thêm javascript vào trước </body>

<script>/*<![CDATA[*/
 var prevScrollpos = window.pageYOffset;
 window.onscroll = function() {
 var currentScrollPos = window.pageYOffset;
 if (prevScrollpos > currentScrollPos) {
 document.getElementById("header").classList.remove('show');
 }
 else { document.getElementById("header").classList.add('show');
 }
 prevScrollpos = currentScrollPos;
 }
/*]]>*/ </script>