Друзья, нужен "плавающий" баннер в пределах диапазона и с отступом сверху .
Высчитываю точку, с которой должен баннер "плыть" вниз. Потом есть точка, до которой он "плывёт". Сверху вниз плывёт как-то рывками. А снизу вверх начинает "плыть", когда поднимается до точки старта "плавания". Плюс еще "плывёт" рывками. Три дня уже гуглю, и что-то туплю. Нужен свежий взгляд и хороший совет.
<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')
}
});