カスタムヘッダーは計算に全く含まれていません。これは、テーマのheaderセクションに何かコンテンツを追加することで再現できます。
サイドバーとチャットに使用している計算では、Discourseヘッダーの高さを考慮し、いくつかの高さを計算する際に--header-offsetを変数として設定しています。
カスタムヘッダーを含めるのは少し難しいかもしれません。なぜなら、カスタムヘッダーのコンテンツは、Discourseヘッダーのようにデフォルトではスクロール時に固定されないからです。そのため、デフォルトで計算に含めると、スクロールしてカスタムヘッダーが消えたときに、高さが不正確になります。
例えば、カスタムヘッダーの高さ（デフォルトで約60px）だけ手動で--header-offsetを増やすと、スクロール時にサイドバーの上に隙間ができます。
カスタムヘッダーがビューからスクロールアウトされたときに、bodyに.dockedクラスを追加します。これを使用することは可能ですが、カスタムヘッダーの有無によってサイドバーの高さが調整される際に、目立つ遷移が発生します。これは.dockedがオンかオフかのどちらかであるためです。
スクロール可能なヘッダーが必要な場合は、カスタムヘッダーの高さだけ--header-offsetを増やすことができます。そして、.d-header-wrapのtop値をカスタムヘッダーの高さに設定します。
スクロールしないヘッダーの場合を改善するための解決策として、以下のことが考えられます。
- カスタムヘッダーの高さをチェックする
- カスタムヘッダーの高さを
--header-offsetに含める - スクロール位置に基づいて、
--header-offset計算で使用されるカスタムヘッダーの高さを減算する。これにより、.dockedクラスではできない方法で、サイドバーの高さをより徐々に調整できます。
正しく実装するには、ある程度の実験が必要になるかもしれません。