show a fixed bottom footer on scroll up

Question

I want to show a footer fixed to the bottom of the screen only when the user scrolls up. Similar to Medium Posts

I have the effect working on my header but I can't get it to work for my footer

Fiddle

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var footerHeight = $('blog-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 > footerHeight) {

    $('blog-footer').removeClass('footer-down').addClass('footer-up');
  } else {

    if (st + $(window).height() < $(document).height()) {
      $('blog-footer').removeClass('footer-up').addClass('footer-down');
    }
  }

  lastScrollTop = st;
}

.blog-footer {
  position: fixed;
  width: 100%;
  background: red;
  bottom: 0;
  height: 100px;
}

<div class="blog-footer footer-down">
  <p>Content</p>
</div>

Can anyone see what I'm missing to get this to work?

Answer 1

Made another version of this: https://jsfiddle.net/h23oe67L/1/

Not that much jQuery (I think we could actually remove it all together):

var distanceToTop = 0;

var $window = $(window);
var header = $('.header');
var footer = $('.footer');

$window.scroll(function () {
    if ($window.scrollTop() < distanceToTop) {
        // we have scrolled up
        header.removeClass('header-up');
        header.addClass('header-down');
        footer.removeClass('footer-down');
        footer.addClass('footer-up');
    } else {
        // we scrolled down (or to the sides, make a separate case for this)
        header.removeClass('header-down');
        header.addClass('header-up');
        footer.removeClass('footer-up');
        footer.addClass('footer-down');
    }

    distanceToTop = $window.scrollTop();
});

Answer 2

You have a small (read serious) error. May be a typo! That's $(".blog-footer") with a ..

Added a snippet for the same, in a simpler way. See the JavaScript and CSS part please.

$(function () {
  last_scroll_position = $(window).scrollTop();
  $(window).scroll(function () {
    if (last_scroll_position > $(window).scrollTop())
      $("footer").addClass("show");
    else
      $("footer").removeClass("show");
    last_scroll_position = $(window).scrollTop();
  });
});

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
p {margin: 0 0 5px; text-align: justify;}

footer {height: 50px; line-height: 50px; width: 100%; text-align: center; background-color: #f99; position: fixed; bottom: -50px; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
footer.show {bottom: 0;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<p>Can we do something easier and similar instead of all those math?</p>
<p>Some long content now.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio, itaque dolores sunt quo facilis doloremque quidem minima. Nesciunt adipisci ex consectetur! Magnam, illo qui voluptas placeat quos expedita nulla!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus in illo corrupti quos hic ipsam eaque eligendi assumenda itaque numquam ullam, praesentium cumque perferendis officia, veniam totam! Quasi ab, necessitatibus.</p>
<footer>Footer Here</footer>