header submenus 테마 구성 요소가 활성화되면 사이드바 하단의 아이콘이 화면에서 사라집니다.
아마도 어떤 CSS 계산이 잘못되고 있는 것 같습니다?
4개의 좋아요
커스텀 헤더는 계산에 전혀 포함되지 않습니다. 테마의 header 섹션에 아무 콘텐츠나 추가하면 이를 재현할 수 있습니다.
사이드바와 채팅에 사용하는 계산은 Discourse 헤더의 높이를 고려하여 일부 높이를 계산할 때 --header-offset 변수를 설정합니다.
Discourse 헤더와 달리 커스텀 헤더 콘텐츠는 기본적으로 스크롤 시 고정되지 않으므로, 이를 계산에 포함하는 것은 다소 까다로울 수 있습니다… 기본적으로 계산에 포함하면, 스크롤하여 커스텀 헤더가 사라진 후 높이가 정확하지 않게 됩니다.
예를 들어, 커스텀 헤더의 높이에 따라 --header-offset를 수동으로 증가시키면(기본적으로 약 60px입니다), 스크롤 시 사이드바 위에 간격이 생기는 것을 볼 수 있습니다:
커스텀 헤더가 스크롤로 화면 밖으로 나가면 body에 .docked 클래스를 추가하므로, 이를 활용할 수 있습니다… 이는 더 나은 방법이지만, 사이드바 높이가 상태 간에 조정될 때 눈에 띄는 전환이 발생합니다… 이는 .docked가 켜지거나 꺼지는 이진 상태이기 때문입니다.
고정형(sticky) 헤더를 원한다면, 이 문제를 우회하는 것이 약간 더 쉽습니다… 커스텀 헤더의 높이에 따라 --header-offset를 증가시키고, .d-header-wrap의 top 값을 커스텀 헤더의 높이로 설정하면 됩니다:
비고정형(non-sticky) 헤더의 경우를 개선하기 위해 머릿속에 떠오르는 한 가지 해결책은 다음과 같습니다:
- 커스텀 헤더의 높이를 확인합니다
--header-offset에 커스텀 헤더의 높이를 포함합니다- 스크롤 위치에 따라
--header-offset계산에 사용된 커스텀 헤더 높이를 단계적으로 감소(de-increment)시킵니다. 이는.docked클래스가 할 수 없는 방식으로 사이드바 높이를 보다 점진적으로 조정합니다.
정확하게 맞추기 위해서는 몇 가지 실험이 필요할 수 있습니다…
5개의 좋아요
정말 도움이 되네요, 감사합니다 @awesomerobot
(Contribute > UX 채널로 이동했습니다)
4개의 좋아요
이것이 여기에 구현되었습니다 (@david에게 큰 감사를 드립니다):
이로써 커스텀 헤더 콘텐츠와 관련된 사이드바, 채팅 및 기타 몇 가지 문제가 해결되어야 합니다.
4개의 좋아요