Алгоритм параллакса не работает с фиксированным элементом - PullRequest
Новая
       17

Алгоритм параллакса не работает с фиксированным элементом

1 голос
/ 12 июня 2019

Я написал простой плагин параллакса, который до сих пор работал фантастически ... Он работает с translating указанным элементом по оси X (слева и справа) и оси Y (вверх и вниз), как пользователь прокручивает страницу.

До сих пор я использовал его только для стандартных (не position: fixed) предметов в DOM.

Однако сейчас я пытаюсь использовать его для элемента, который находится внутри элемента с позицией fixed, и по некоторым причинам мой алгоритм возвращает 0 для каждого перевода. Я предполагаю, что это как-то связано с ограничивающим прямоугольником, но я не могу решить это.

Вот алгоритм: 

let value = Math.round(((window_position + window_height - (height / 2) - (window_height / 2)) * item.options.speed) + (top * -1 * item.options.speed));

А вот полный фрагмент сценария: 

/**
 * Move each of the items based on their parallax
 * properties.
 *
 * @return void
 */
move() {

    let window_height   = window.innerHeight;
    let window_position = window.scrollY || window.pageYOffset;

    this.items.forEach((item) => {

        let { top, height } = item.element.getBoundingClientRect();

        // This will determine the exact position of the element in
        // the document
        top += window_position;

        // No need to proceed if the element is not in the viewport
        if ((top + height) < window_position || top > (window_position + window_height)) {
            return;
        }

        // Calculate the adjustment
        let value = Math.round(((window_position + window_height - (height / 2) - (window_height / 2)) * item.options.speed) + (top * -1 * item.options.speed));

        // Invert the adjustment for up and left directions
        if (['up', 'left'].includes(item.options.direction)) {
            value = -value;
        }

        // This returns 0, regardless of the window_position
        console.log(top, ((window_position + window_height - (height / 2) - (window_height / 2)) * item.options.speed), (top * -1 * item.options.speed));

        window.requestAnimationFrame(() => {

            // Do the CSS adjustment

        });

    });
}

1 Ответ

0 голосов
/ 12 июня 2019

Я прибег к грязному исправлению (все еще открыт для предложений): 

// Calculate the adjustment
let value = (window_position + window_height - (height / 2) - (window_height / 2)) * item.options.speed;

// If the element is not fixed then adjust the algorithm
if (!item.options.fixed) {
    value += (top * -1 * item.options.speed);
}

value = Math.round(value);
...