귀하의 “전역 공지” 기능을 사용해 보았습니다. 하지만 불행히도 스크롤을 하면 공지가 사라집니다. 따라서 공지를 고정(sticky) 상태로 유지하고 싶습니다. 하지만 커스텀 CSS로는 이를 구현할 수 없습니다. position:sticky는 하나의 요소에만 적용할 수 있는데, 이미 헤더가 고정 요소로 사용되고 있기 때문입니다.
공지가 DOM의 어디에 배치되는지 설정할 수 있도록 해 주시겠습니까? 그러면 헤더 컨테이너 안에 공지를 배치하여 헤더와 함께 고정 상태로 만들 수 있습니다.
배너를 사용하지 않는 이유는 무엇인가요?:
추천해 주셔서 감사합니다. 하지만 이는 위에서 설명한 문제를 해결하지 못합니다. 전역 공지사항이 고정(sticky)되지 않기 때문에, 범용 배너 역시 고정되지 않습니다. 추가로 설명드린 바와 같이, 범용 배너는 전역 공지사항과 동일한 DOM 위치를 사용하며, 이 위치는 고정 헤더 컨테이너 외부에 있기 때문에 CSS만으로 이를 구현하는 것은 불가능합니다.
좋은 지적입니다.
또 다른 옵션은 Layouts 플러그인입니다. 이 플러그인은 고정(sticky) 사이드바를 추가할 수 있습니다. 또한 원하는 콘텐츠를 추가하기 위해 사용할 수 있는 커스텀 HTML 위젯도 있습니다.
부모 컨테이너에 sticky를 적용하면 동작합니다… 다만, 이 컨테이너 안에 다른 알림이 있다면 그것도 함께 고정됩니다(예: “다른 사람이 게시글에 답글을 달면 실시간 알림을 받으시겠습니까?” 알림).
헤더에서 상단을 올바르게 오프셋하는 CSS 속성이 있습니다:
#main-container.container {
position: sticky;
top: var(--header-offset);
z-index: 9;
}