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

Đại Phi 0 nhận xét Blogspot, Thủ thuật Sunday, June 23, 2019

Đối với blogspot cố định header trên đầu blog khi xem trang trên máy tính 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.

 

Ẩn hiện header khi cuộn trang cho blogspot
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;........}

Sau đó bạn thêm css cho nó

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

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[
 /*
  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>

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.