jquery - 创建一个固定的导航，在滚动一小段距离后滑开并在向上滚动时返回

Question

我正在尝试创建一个固定导航，它会在用户向下滚动一小段距离后滑开，然后在向上滚动后返回到固定 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/

Answer 1

像这样:

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;
    }
})();