Добавить JS функционал для прокрутки рекламных блоков в сайдбаре

  1. Биржа фриланса
  2. Веб-программирование
Закрыт2 заявки140 просмотров

Здравствуйте!

Нужно добавить JS функционал для прокрутки рекламных блоков в сайдбаре на готовом сайте.

Основные требования:

- Есть страница с тремя блоками новостей, к каждому блоку есть свой рекламный блок который показываем в сайдбаре когда пользователь доскроллит к определенному месту. Важный момент в том что рекламные блоки не вставлены в каждый блок новостей или сайдбар поэтому нужно переносить их в сайдбар с помощью jQuery/JS при загрузке страницы и/или position: fixed/absolute.

- Когда прискроллили к первому блоку новостей в сайдбаре уже должен быть первый рекламный блок. Скролим далее - блок остается в пределах viewport’a вместе с индикатором прогресса.

- Если доскроллили до момента когда второй новостной блок появляется внизу viewport`a/окна предыдущий (первый) рекламный блок должен открепится и начать скроллится вместе со всей страницей вверх.

- В то же время другой рекламный блок едет вверх вместе со страницей (выровненный по верху “своего” новостного блока) и когда доскроллится до места где стоял первый он должен закрепится там и оставаться на месте пока мы скроллим далее.

- С третьим блоком повторяем все то же что и с первыми двумя и удостоверяемся что все работает хорошо при обратной прокрутке страницы снизу вверх. 

Есть небольшая наработка в JS которая переносит рекламные блоки в сайдбар и определяет в пределах какого новостного блока сейчас скроллим и еще немного кода который возможно пригодится для завершения задания. Можно использовать то что уже имеется или сделать с нуля с использованием существующего HTML, SCSS/CSS. К сожалению вносить какие либо изменения в HTML на данном этапе нельзя поэтому и переносим рекламные блоки в нужное место с помощью JS.

Ссылка на готовую часть проекта - http://novafm.mehocode.com/

CSSHTMLJavaScriptjQuerySCSS
8 лет назад
MehoCode
Андрей 
35 лет
8 лет в сервисе
Был
6 лет назад

Заявки фрилансеров

Нет заявок фрилансеров