Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2018, 18:35
Новичок на форуме
Отправить личное сообщение для EuRo1985 Посмотреть профиль Найти все сообщения от EuRo1985
 
Регистрация: 22.11.2016
Сообщений: 8

Отслеживание CSS свойства translate у элемента и подстановка в другой элемент
Приветствую, знатоки JS и JQuery!

Прошу помощи с решении задачи, сам с JS слаб, а в интернете уже все перерыл - ответа не нашел...

Есть один сайт, на котором использую скрипт fullPage - постраничная прокрутка. По-сути скрипт заворачивает все секции в "слайды" со свойством position: fixed. Т.е. он полностью убирает скролл.

Однако есть слайды в которых необходима прокрутка и тут самое интересное - "прокрутка" происходит средствами изменения transform: translate и свойства overflow: hidden. Следовательно событие scroll не срабатывает.

Внутри этого блока с прокруткой есть элемент, который должен быть зафиксировать, position: fixed в данном случае не работает.

Задача - динамически определять у одного элемента (fp-scroller) свойства transform: translate (вероятно при изменении) и подставлять в другой обратные значения (map-block). Т.е. в данном примере нужно подставить на текущий момент transform: translate(0px, 57px) элементу map-block.

Кто-нибудь сталкивался с подобной задачей?

Буду сильно благодарен за помощь.

<div class="fp-scroller" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, -57px) translateZ(0px);">
  <div class="fl-grid two-cols">
    <div class="column text-block">
    </div>
    <div class="column map-block">
  </div>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2018, 11:56
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

EuRo1985, отслеживайте событие while/mousewheel над элементом.
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2018, 16:12
Новичок на форуме
Отправить личное сообщение для EuRo1985 Посмотреть профиль Найти все сообщения от EuRo1985
 
Регистрация: 22.11.2016
Сообщений: 8

Сообщение от ruslan_mart Посмотреть сообщение
EuRo1985, отслеживайте событие while/mousewheel над элементом.
Огромное спасибо за наводку. Реализовал скрипт след. образом, все работает. За грамотность не ручаюсь, если кто-то подправить - респект

$(function(){
    $('body').on('mousewheel DOMMouseScroll', function(event) {
      if ($('.contacts-section').is('.active')) { // ограничиваем выполнение нужным слайдом
        var obj = $('.contacts-section .fp-scroller');
        var transformMatrix = obj.css("-webkit-transform") ||
                              obj.css("-moz-transform")    ||
                              obj.css("-ms-transform")     ||
                              obj.css("-o-transform")      ||
                              obj.css("transform");
        var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(',');
        var x = matrix[12] || matrix[4]; // translate x
        var y = matrix[13] || matrix[5]; // translate y
        $('.contacts-section .map-block').css({
          transform: 'translate(0, ' + Math.abs(y) + 'px)'
        });
      }
    });
});

Последний раз редактировалось EuRo1985, 10.04.2018 в 16:19.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
После цикла не изменяется CSS свойства элемента массива classic Общие вопросы Javascript 3 28.11.2017 13:42
новый DOM элемент не подхватывает свой css bochus Events/DOM/Window 15 09.11.2014 14:53
Получение вычисленного значения css свойства FanAizu jQuery 2 12.03.2014 20:30
Изменение css свойства Rumis jQuery 2 21.05.2013 11:55
Узнать CSS правило для элемента vinet Events/DOM/Window 4 10.12.2010 08:12