[silatal]

Друзья, нужен "плавающий" баннер в пределах диапазона и с отступом сверху .
Высчитываю точку, с которой должен баннер "плыть" вниз. Потом есть точка, до которой он "плывёт". Сверху вниз плывёт как-то рывками. А снизу вверх начинает "плыть", когда поднимается до точки старта "плавания". Плюс еще "плывёт" рывками. Три дня уже гуглю, и что-то туплю. Нужен свежий взгляд и хороший совет.

<div class="banner2">
<img src="https://www.cyberforum.ru/images/banner2.png" alt="banner2">
</div>

/* CSS*/
/* позиция баннера до старта скролла */
.banner2 {  
    position: relative;;
    top: 20px;
    right: 0;
}
/* позиция баннера во время скролла */
.banner_fix_top {
    position: fixed;
    top: 20px;
    right: 0;
}
/* позиция баннера после скролла */
.banner_fix_bottom {
    position: relative;
    top: 370px;
    right: 0;
}

// jquery
var block_height = $('.block_banner').offset(); // точка старта
var block_footer = $('.social-icon').offset();  // точка финиша
$(document).scroll(function () {
    if ($(this).scrollTop() > block_height.top && $(this).scrollTop() < block_footer.top) {  //диапазон скролла
        $('.banner2').addClass('banner_fix_top');
    } else {
        $('.banner2').removeClass('banner_fix_top');
    }
    if ($(this).scrollTop() > block_height.top) {  //старт скролла
        $('.banner2').addClass('banner_fix_top');
    }
 
    
    if ($(this).scrollTop() > block_footer.top - 750) { // финиш скролла
        $('.banner2').addClass('banner_fix_bottom');
        $('.banner2').removeClass('banner_fix_top');
    }
 
    if ($(this).scrollTop() < block_height.top) { // до начала скролла 
        $('.banner2').removeClass('banner_fix_top');
        $('.banner2').removeClass('banner_fix_bottom')
    }
});