<body>에 항상 존재하는 "docked"?

[adundovi (4ndY)]

최근 Discourse가 <body> 태그에서 “docked” 클래스를 처리하는 방식이 변경된 것 같습니다.

기억이 정확하다면, 이전에는 스크롤이 시작되면 <body>에 "docked"가 동적으로 나타났습니다(예시). 하지만 지금은 항상 존재합니다. 불행히도 이로 인해 이 클래스의 의미가 사라졌습니다. 이제는 이 클래스를 완전히 제거하고 not(.docked)가 포함된 라인들을 삭제하면 됩니다. 하지만 여전히 스크롤을 시작할 때 축소된 헤더와 달리 상단에서 다른 헤더 콘텐츠를 표시하기 위해 이 클래스를 사용하는 우리에게 이전의 동작 방식을 유지하는 것이 도움이 될 것입니다.

설명된 경우를 처리하는 다른 방법이 있을까요? 조언 부탁드립니다.

[Don]

이것이 도움이 될 수 있습니다:

헤더 스크롤 그림자

You can add something like to the header tab of your theme <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 IntersectionObse…

도킹된 헤더 바의 로고

Hello I think you can use for this @Johani 's fantastic solution. Something like this Create a new component and add the following. Header section <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() { c…

@adundovi

지금 불행하게도, 이 클래스는 그 목적을 잃게 됩니다: 단순히 완전히 제거하고 라인에 포함된 not(.docked)를 삭제할 수 있습니다.

말씀하신 이 .docked는 .topic-progress-wrapper에 사용되는 것과 다릅니다.
이는 이 이 나타날 때 표시됩니다.

토픽의 하단에 고정(docked)됩니다.

[adundovi (4ndY)]

감사합니다. 제안해 주신 두 가지 주제를 확인해 보겠습니다.