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

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

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> 

Answer 2

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