# Header子菜单主题组件将侧边栏底部推离屏幕 **URL:** \ **Category:** UX\ **Created:** [2023年二月17日 15:55 UTC](https://meta.discourse.org/t/header-submenus-theme-component-pushes-bottom-of-sidebar-out-of-the-screen/255496 "2023-02-17T15:55:53Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)\ **Post date:** [2023年二月17日 15:55 UTC](https://meta.discourse.org/t/header-submenus-theme-component-pushes-bottom-of-sidebar-out-of-the-screen/255496/1 "2023-02-17T15:55:53Z")
当 [header submenus](https://meta.discourse.org/t/header-submenus/94584) 主题组件处于活动状态时，侧边栏底部的图标会从屏幕上消失。 [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](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 计算出了问题？ ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2023年二月17日 16:46 UTC](https://meta.discourse.org/t/header-submenus-theme-component-pushes-bottom-of-sidebar-out-of-the-screen/255496/2 "2023-02-17T16:46:07Z")
> [@RGJ](#): > > 是不是CSS计算出了问题？ 自定义页眉根本没有包含在计算中，通过向主题的 `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` 类更平滑地调整侧边栏高度。 可能需要一些实验才能正确。 ---
**Author:** ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)\ **Post date:** [2023年二月17日 17:14 UTC](https://meta.discourse.org/t/header-submenus-theme-component-pushes-bottom-of-sidebar-out-of-the-screen/255496/3 "2023-02-17T17:14:34Z")
非常有用，谢谢 @awesomerobot (已将此移至 #Contribute > UX) ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2023年五月17日 21:39 UTC](https://meta.discourse.org/t/header-submenus-theme-component-pushes-bottom-of-sidebar-out-of-the-screen/255496/4 "2023-05-17T21:39:43Z")
> [@awesomerobot](#): > > 想到一个改进非固定页眉的方法是： > > 1. 检查自定义页眉的高度 > 2. 将自定义页眉的高度包含在 `--header-offset` 中 > 3. 根据滚动位置，递减用于 `--header-offset` 计算的自定义页眉高度。这将比 `.docked` 类更平滑地调整侧边栏的高度。 这已在此处实现（非常感谢 @david）： > > > In a theme component I've been trying to compensate for a custom header in CSS b…y adding to \`--header-offset\` but this doesn't cover when \`headerOffset()\` is used in JS: https://github.com/discourse/discourse-header-submenus/blob/b5661b04839a1e9b78eaf25541422f324b96eac6/desktop/desktop.scss#L18 > > I documented the need for this earlier over here: https://meta.discourse.org/t/header-submenus-theme-component-pushes-bottom-of-sidebar-out-of-the-screen/255496/2?u=awesomerobot > > So here I'm checking the distance of the \`.d-header-wrap\` from the top of the page, and adjusting on scroll so this covers both sticky and non-sticky custom headers. > > Previously this was covered here in \`minimumOffset\` (deprecated): https://github.com/discourse/discourse/blob/392bafcd7e6427964510b01b36fac9c489244e99/app/assets/javascripts/discourse/app/lib/offset-calculator.js#L21 but it didn't make it over to \`headerOffset\` 这应该可以解决侧边栏、聊天以及自定义页眉内容的其他一些问题。