Để 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:transformNế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 easeTiế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>