Как написать такой эффект на css?

$(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').fadeIn();} //блок будет виден, если значения соответствуют указанным
  else if (top > pip - height) {$('.floating').fadeOut(100);} //блок скроется когда достигнет заданного расстояния
  else {$('.floating').removeClass('fixed');}
  });
});

.footer {
position:fixed; 
}