Question

我希望我的页脚在向下滚动时显示，并在向上滚动并达到delta时隐藏。现在它从头开始显示向下滚动是在那里，当向上滚动是在达到三角洲之前隐藏。任何人都可以帮我隐藏它onload并显示何时超过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>

以上是您更新的snipplet

用它来显示隐藏页脚

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

隐藏页脚onload并在滚动时显示

1 个答案: