前言:工作中需要做个滑动隐藏效果,因此做了个简单的,特此记录。
// 滑动
function readyScroll() {
var header = $('.fixed-header'),
search = $('.fixed-search');
var scrolling = false,
previousTop = 0,
currentTop = 0,
scrollDelta = 10,
scrollOffset = 150;
$(window).on('scroll', function(){
if( !scrolling ) {
scrolling = true;
setTimeout(function() {
var currentTop = $(window).scrollTop();
if (previousTop - currentTop > scrollDelta) {
// 向上滑动, 显示导航栏
header.removeClass('is-hidden');
search.removeClass('is-hidden');
} else if( currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
// 向下滑动, 隐藏导航栏
header.addClass('is-hidden');
search.addClass('is-hidden');
}
previousTop = currentTop;
scrolling = false;
}, 250);
}
});
};