Проблема в плавающем блоке. (1 Viewer)

[stillmaster]

Всем привет решил настроить плавающий блок на сайте, но столкнулся с проблемами, во первых он дергается, во время скролла, а не двигается плавно, во вторых наезжает на нижний элемент div, хотя вроде я указал, что нужно перед ним останавливаться, а затем просто исчезает при прокрутке ниже.
CSS

.floating {  display: flex; align-content: center; flex-wrap: wrap; flex-direction: column; float: right;
  
}
.fixed {
 position: fixed;
 top: 90px; /*здесь указываем отступ сверху*/
 z-index: 9999; /*устанавливаем блок поверх всех элементов на странице*/
}
#catrecl {  display: flex; align-content: center; flex-wrap: wrap;  flex-direction: column; width:25%; float: right; }
.catreclbox {  position: relative;  display: flex;   width: 100%; justify-content: center;}

.ads {  width:240px;height: 400px; overflow: hidden;}

JS

$(function(){
 var topPos = $('.floating').offset().top;
  $(window).scroll(function() {
  var top = $(document).scrollTop(),
      pip = $('.reklfoot').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');}
  });
});

 

[Евгений Попов]

В css есть такое без использования js кода. Нагуглить недолго, щас с телефона просто не удобно точно дать ответ.