Код: Выделить всё
// 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
Мобильная версия