Fixed block disappears at the end of the page?

For such effects, use position: sticky

\rhttps://developer.mozilla.org/en-US/docs/Web/CSS/p...

Seeing Your screenshot, on the same resource is shown below the code. And then dabble with the class
$(function(){
var topPos = $('.floating').offset().top;
$(window).scroll(function() {
var top = $(document).scrollTop(),
pip = $('.footer').offset().top
height = $('.floating').outerHeight();
if (top > topPos && top < pip - height) {$('.floating').addClass('fixed').removeAttr("style");}
else if (top > pip - height) {$('.floating').removeClass('fixed').css({'position':'absolute','bottom':'0'});}
else {$('.floating').removeClass('fixed');}
});
});