0

На данном сайте реализована интерактивная возможность по клику на блоки с надписями "территории опережающего развития" и т.д, создавать всплывающие блоки над элементами svg.

Блоки создаются и меняются по клику, но не скролятся вместе с картой.

Как можно решить проблемы скрола? Они должны следовать за картой.

JS который создает блоки:

(function($) {
  $('.capabilities-wrapp .capabilities-caption').click(function() {
      $('.tooltip').remove();
      $('.stat-capabilites_map path.cls-3').each(function(e) {
       $('body').prepend('<div class="sss" id="sss'+e+'"></div>');
          $("#sss"+e).html($(this).attr('title')).css({"top":$(this).offset().top, "left":$(this).offset().left});
      })

  });
})(jQuery);

CSS всплывающего блока:

.sss { 
  position: absolute;
  z-index: 100;
}
2

1 ответ 1

0

Посмотрел сайт, да, создаются по клику эти тултипы, но при скролле - удаляются сразу. http://joxi.ru/LmGVM0dIeO0a8r Приведенной выше функции мало, ищи в скриптах функцию их удаления на скролл.

А если в общем - удаление сделано не с проста, и извиняюсь за прямоту, потому, что само решение привязать тултипы к body а не самой карте - бестолковое, и даже если при скролле их удаление будет отменено, то при ресайзе окна они будут оказываться х.з. где сбоку. Да и карта фиксируется при скролле.

В общем функцию позиционирования тултипов над картой нужно переписать, сделать привязку к карте, а не body.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.