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를 추가해도 동일한 결과가 나오지 않습니다.
스크롤 시 헤더에 .scrolling 클래스를 추가하는 사용자 정의 JavaScript를 추가했습니다. Discourse는 기본적으로 이 기능을 제공하지 않습니다(효과가 좋습니다!).
이 CSS 클래스가 기본적으로 적용되기를 원합니다. 역시 매우 멋지다고 생각합니다.
테마의 헤더 탭에 다음과 같은 코드를 추가할 수 있습니다
<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);
}
}
감사합니다. 정말 감사합니다.
이 문제를 발견했습니다. 이 코드는 PWA 애플리케이션의 실행을 중단시킵니다.
이 문제를 디버깅하려면 몇 가지 추가 정보가 필요합니다.
코드를 제거하면 PWA 애플리케이션이 실행됩니까?
테마의 header 탭에 추가하셨나요?
어떤 기기/OS로 테스트하고 계신가요?
네, 테마 헤더를 추가하세요. 코드를 제거해도 PWA가 계속 작동합니다. 공식 설치 지침에 따라 Ubuntu 20.04가 설치된 서버에서 라이브 사이트로 테스트했습니다. Android 11 기기 및 PC의 Chrome 브라우저에서 확인했습니다.