在加载时隐藏页脚并在滚动时显示

Question

我希望我的页脚在向下滚动时显示并在向上滚动并到达 delta 时隐藏。 现在它从一开始就显示向下滚动，当向上滚动时，在到达增量之前隐藏。 任何人都可以帮助我在加载时隐藏它并显示何时超过 delta 并在 delta 之前向上滚动时隐藏？

http://fiddle.jshell.net/764396ho/

jQuery

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('footer').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    if (st > lastScrollTop && st > navbarHeight){
       $('footer').removeClass('nav-up').addClass('nav-down');
    } else {
        if(st + $(window).height() < $(document).height()) {
            $('footer').removeClass('nav-down').addClass('nav-up');
        }
    }
    lastScrollTop = st;
}

Answer 1

 var didScroll; var lastScrollTop = 0; var delta = 5; var navbarHeight = $('footer').outerHeight(); $('footer').hide(true); $(window).scroll(function(event) { didScroll = true; $('footer').show(true); }); setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; } }, 250); function hasScrolled() { var st = $(this).scrollTop(); if (Math.abs(lastScrollTop - st) <= delta) return; if (st > lastScrollTop && st > navbarHeight ) { $('footer').removeClass('nav-up').addClass('nav-down'); } else { if (st + $(window).height() < $(document).height()) { $('footer').removeClass('nav-down').addClass('nav-up'); } } lastScrollTop = st; }

 footer { background: #f5b335; height: 40px; position: fixed; bottom: 0; transition: bottom 0.2s ease-in-out; width: 100%; } .nav-up { bottom: -40px; } main { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= ) repeat; height: 2000px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <footer class="nav-down"> </footer> <main> </main>

以上是您更新的片段

使用它来显示隐藏页脚

$('footer').hide(true);