向上滚动时显示固定的底部页脚

Question

我只想在用户向上滚动时显示固定在屏幕底部的页脚。类似于 Medium Posts

我的页眉有效果，但我的页脚无法使用

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>

任何人都可以看到我缺少什么才能让它工作吗？

Answer 1

你有一个小错误（阅读严重）。可能是错别字！那是 $(".blog-footer") 和 .。

以更简单的方式添加了相同的代码段。请参阅 JavaScript 和 CSS 部分。

$(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>

Answer 2

制作了另一个版本：https://jsfiddle.net/h23oe67L/1/

没那么多jQuery（我想我们实际上可以一起删除它）：

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

向上滚动时显示固定的底部页脚

show a fixed bottom footer on scroll up

javascript

jquery

html

onscroll