показать фиксированный нижний нижний колонтитул на прокрутке вверх

Question

Я хочу показать нижний колонтитул, зафиксированный в нижней части экрана, только когда пользователь прокручивается вверх. Подобно Medium Posts

У меня есть эффект, работающий на моем заголовке, но я не могу заставить его работать на мою сноску

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>

Может кто-нибудь увидеть, что я «Нет, чтобы заставить это работать?

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