Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.05.2020, 23:07
Новичок на форуме
Отправить личное сообщение для silatal Посмотреть профиль Найти все сообщения от silatal
 
Регистрация: 22.11.2018
Сообщений: 3

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

<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')
    }
});

Последний раз редактировалось silatal, 30.05.2020 в 00:01.
Ответить с цитированием
  #2 (permalink)  
Старый 30.05.2020, 03:26
Новичок на форуме
Отправить личное сообщение для silatal Посмотреть профиль Найти все сообщения от silatal
 
Регистрация: 22.11.2018
Сообщений: 3

Подсказали на другом форуме, вдруг кому-то пригодится:

$(document).scroll(function () {
    // если в диапазоне то класс 'banner_fix_top'
    if ($(this).scrollTop() > block_height.top && $(this).scrollTop() < block_footer.top - 600) 
    {
        $('.banner2').addClass('banner_fix_top');
        $('.banner2').removeClass('banner_fix_bottom');
    // выходит за пределы диапазона вниз меняем класс на 'banner_fix_bottom'
    } else if ($(this).scrollTop() > block_footer.top - 600) 
    { 
        $('.banner2').addClass('banner_fix_bottom');
        $('.banner2').removeClass('banner_fix_top');
    } // выходит за пределы диапазона вверх удаляем классы
    else if ($(this).scrollTop() < block_height.top)
    {
        $('.banner2').removeClass('banner_fix_top');
        $('.banner2').removeClass('banner_fix_bottom');
    }
      
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Слайдер внизу баннера _marisha Общие вопросы Javascript 1 11.06.2019 12:47
Как убрать скролл при клике на кнопку? marki1404 Элементы интерфейса 1 03.01.2019 19:42
В каком направлении и сколько раз был прокручен скролл webrepa Events/DOM/Window 19 12.02.2016 14:45
FancyBox переопределяет вертикальный скролл ? ilyas-> Элементы интерфейса 14 08.11.2014 16:55
Js scrollpane, постоянно виден скролл, как убрать? metaller92 jQuery 0 17.07.2013 11:23