Header子菜单主题组件将侧边栏底部推离屏幕

用户体验
1

当 header submenus 主题组件处于活动状态时，侧边栏底部的图标会从屏幕上消失。

https://cdn.screencast.com/uploads/g000302MBEXFEjy4eyPzZN1QY9lUH/LWR_Recording.mp4?sv=2021-08-06&st=2023-05-18T04%3A17%3A29Z&se=2023-05-19T04%3A17%3A29Z&sr=b&sp=r&sig=7%2B95Shu88XVl4t3jX%2BP9p8cxStR%2B2WKs4CSyK%2FzvaZc%3D

这可能是某种 CSS 计算出了问题？

4 个赞
2

自定义页眉根本没有包含在计算中，通过向主题的 header 部分添加任何内容都可以重现此问题。

我们用于侧边栏和聊天的计算会考虑 Discourse 页眉的高度，并在计算某些高度时将 --header-offset 设置为一个变量。

包含自定义页眉可能有点棘手，因为自定义页眉内容默认不会像 Discourse 页眉那样在滚动时固定显示……因此，如果我们默认将其包含在计算中，一旦您滚动并且自定义页眉消失，高度就会不正确。

因此，例如，如果我手动将 --header-offset 增加自定义页眉的高度（默认约为 60px），您会在滚动时在侧边栏上方看到一个间隙：

当自定义页眉滚动出视图时，我们会向 body 添加一个 .docked 类，因此可以使用它……这更好，但侧边栏高度在状态之间调整时会出现明显的过渡……这是因为 .docked 要么打开要么关闭。

如果您想要一个固定的页眉，这会更容易解决……因为您可以将 --header-offset 增加自定义页眉的高度，然后将 .d-header-wrap 的 top 值设置为自定义页眉的高度：

对于非固定页眉的情况，我想到的一个解决方案是：

  1. 检查自定义页眉的高度
  2. 将自定义页眉高度包含在 --header-offset 中
  3. 根据滚动位置递减用于 --header-offset 计算的自定义页眉高度。这将比 .docked 类更平滑地调整侧边栏高度。

可能需要一些实验才能正确。

5 个赞
3

非常感谢 @awesomerobot 的帮助！

（已移至 UX）

4 个赞
4

这已在此处实现（非常感谢 @david）：

这应该可以解决侧边栏、聊天以及自定义页眉内容的其他一些问题。

4 个赞