我正在尝试创建一个固定导航,它会在用户向下滚动一小段距离后滑开,然后在向上滚动后返回到固定 View 。下面的代码在一定程度上有效但跳跃,没有在导航中上下滚动时获得的平滑幻灯片:
http://www.advancedcustomfields.com/
$(document).ready(function() {
var previousScroll = 0,
headerOrgOffset = $('.nav').offset().top;
$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
if(currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('.nav').fadeOut();
} else {
$('.nav').fadeIn();
$('.nav').addClass('scrolling');
$('.anchor').addClass('anchorpaddingtop');
}
} else {
$('.anchor').removeClass('anchorpaddingtop');
$('.nav').removeClass('scrolling');
}
previousScroll = currentScroll;
});
});
我的示例位于 http://sandbox.jonathanbeech.co.uk/
像这样:
Playground - http://codepen.io/vsync/pen/GdLlK
(function(){
$(window).on('scroll.getDirection', getScrollDirection);
var lastScrollTop = '',
sticky = $('#header'),
stickyH = sticky.height(),
sensetivity = 16, // lower is more sensetive
stickyPos = 0,
lastDownPos, delta, st;
function getScrollDirection(){
st = window.pageYOffset || document.documentElement.scrollTop;
if( st > lastScrollTop ){ // && sticky.hasClass('sticky')
// console.log( 'down' );
if( stickyPos <= -stickyH && sticky.hasClass('sticky') ){
stickyPos = -stickyH;
sticky.removeClass('sticky').removeAttr('style');
}
else{
sticky.css('top', stickyPos);
stickyPos -= sensetivity / 2;
}
lastDownPos = st;
}
else{
// console.log( 'up' );
delta = Math.abs(lastDownPos - st);
if( !sticky.hasClass('sticky') ){
stickyPos = -stickyH;
sticky.addClass('sticky').css({ position:'fixed', top: stickyPos });
}
else if( stickyPos < 0 ){
stickyPos += (delta / sensetivity);
if( stickyPos > 0 ) stickyPos = 0;
sticky.css('top', stickyPos);
}
}
lastScrollTop = st;
}
})();
我是一名优秀的程序员,十分优秀!