При прокрутке форума https://forum.ghost.org/ в заголовке появляется тень. Я вижу, что они используют следующий CSS.
.d-header {
height: 56px;
padding: 0;
border-bottom: 1px solid #e5eff5;
background: rgba(255,255,255,0.97);
box-shadow: none;
transition: all 0.4s ease;
}
CSS для прокрутки:
.d-header.scrolling {
box-shadow: 8px 14px 38px rgb(39 44 49 / 4%), 1px 3px 8px rgb(39 44 49 / 4%);
transition: all 0.2s ease;
}
У меня не получается получить тот же результат, когда я добавляю указанный выше CSS на свой форум.
Они добавили свой JavaScript-скрипт, который добавляет класс .scrolling к заголовку при прокрутке. Discourse по умолчанию этого не делает (хотя это выглядит здорово!).
4 лайка
Я бы хотел, чтобы этот CSS-класс был по умолчанию. Мне кажется, он тоже выглядит очень красиво.
Johani
24.Июль.2021 21:38:09
4
Вы можете добавить что-то вроде этого во вкладку заголовка вашей темы
<div class="header-anchor"></div>
<script type="text/discourse-plugin" version="0.8">
if (!"IntersectionObserver" in window) return;
const { on } = require("discourse-common/utils/decorators");
const stickyClass = "sticky";
api.modifyClass("component:site-header", {
@on("didInsertElement")
stickyHeaderCheck() {
const anchor = document.querySelector(".header-anchor");
const header = this.element;
new IntersectionObserver(entries => {
if (!entries[0].isIntersecting) {
header.classList.add(stickyClass);
} else {
header.classList.remove(stickyClass);
}
}).observe(anchor);
}
});
</script>
Это добавит класс sticky к обертке заголовка и позволит вам настроить пользовательские стили CSS, когда заголовок «прилипает» к верху при прокрутке
.d-header {
box-shadow: none;
transition: box-shadow 0.3s ease-in-out;
will-change: box-shadow;
.sticky & {
box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}
}
5 лайков
Я благодарен. Большое спасибо.
1 лайк
Я это заметил. Этот код останавливает работу PWA-приложения.
Johani
25.Июль.2021 21:43:30
8
Мне нужно ещё несколько деталей для отладки.
Запускается ли ваше PWA-приложение, если вы удалите этот код?header вашей темы?
1 лайк
Да, добавьте заголовок темы. PWA продолжает работать после удаления кода. Я протестировал это на сервере с установленной Ubuntu 20.04 по официальным инструкциям, на живом сайте, на устройстве с Android 11 и в браузере Chrome на ПК.
