Ẩ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:transformTiế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.