Изображение героя параллакса становится серым после изменения размера окна / DevToolsJquery

Программирование на jquery
Ответить
Anonymous
 Изображение героя параллакса становится серым после изменения размера окна / DevTools

Сообщение Anonymous »

Я использую jQueryStellar, чтобы создать героя параллакса в верхней части страницы.

Код: Выделить всё

// parallax initialisation
$(window).stellar({
responsive: true,
parallaxBackgrounds: true,
parallaxElements: true,
horizontalScrolling: false,
hideDistantElements: false,
scrollProperty: 'scroll'
});

Код: Выделить всё

/* overlay & basic styling */
.site-blocks-cover {
min-height: 600px;
height: 100vh;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}

.site-blocks-cover::before {
/* dark overlay */
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .4);
}

Код: Выделить всё










Apartment close to Old Town


Address, 8700, abc

[url=https://example.com]Book now[/url]



Что происходит на самом деле
  • Загрузите страницу.
  • Прокрутите вниз (например, ~600 пикселей — главный раздел теперь находится намного выше области просмотра).
  • Измените размер окна браузера или откройте DevTools (F12).
Как только срабатывает событие изменения размера, фон героя становится сплошным серым (остается только полупрозрачное наложение) от верхней части страницы до текущей позиции прокрутки.
Обновление страницы исправляет это до следующего изменения размера.
Что я нашел до сих пор
  • Stellar обновляет положение фона при каждом измените размер, чтобы коэффициент параллакса оставался правильным.
  • Во время перерасчета он принимает во внимание текущий элемент ScrollTop.
  • Поскольку я уже прокрутил 600 пикселей, Stellar перемещает фон вверх на >600 пикселей вверх, эффективно выдвигая все изображение из поля элемента.
Наложение псевдоэлемента остается на месте → я вижу только темное наложение, похожее на серый блок.
Вопросы
Как решить проблему с серым фоном при прокрутке? Я предпочитаю этот эффект CSS: фоновое прикрепление: исправлено. Я попробовал $(window).stellar('refresh'), но это не сработало и не похоже на решение (но, возможно, так и есть). Я чувствую, что у меня заканчиваются варианты.

Подробнее здесь: https://stackoverflow.com/questions/797 ... e-devtools
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»