CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Flap Jack
Flap Jack

Reputation: 87

Hide the footer onload and show on scroll

I want as my footer to show on scroll down and hide when scroll up and reach delta. Now it is showing from beginning on scroll down is there and when scroll up is hide before reach the delta. Can anyone help me to hide it onload and show when is more than delta and hide on scroll up when is before 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;
}

Upvotes: 0

Views: 1708

Answers (1)

BhandariS
BhandariS

Reputation: 604

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>

Above is your updated snipplet

use this to show the hide the footer

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

Upvotes: 1

Related Questions