サイドバーのスクロール挙動を修正

記事詳細ページで、サイドバーがスクロール時に正しく追従するように修正しました。

問題点

記事詳細ページで、サイドバーがスクロール時に追従せず、長い記事ではサイドバーが見えなくなることがありました。

修正内容

実装した解決策

記事詳細ページのサイドバーに position: sticky を適用し、スクロール時にヘッダーの下に固定されるようにしました。

主な変更点:

  • position: sticky を追加
  • top: 70px を設定(PCヘッダーの高さ分)
  • align-self: flex-start で配置を調整
  • padding-bottom: 60px で下部に余白を追加

実装のポイント

  • PC表示時(752px以上)のみ適用
  • ヘッダーの高さ(70px)を考慮して top を設定
  • :has(.single-article) セレクタで記事詳細ページのみに適用

修正後の挙動

  • スクロール時にサイドバーがヘッダーの下に固定される
  • 長い記事でもサイドバーが常に見える
  • ヘッダーと重ならない位置に固定される

今後の改善点

  • モバイル表示での挙動の最適化
  • サイドバーの高さが画面を超える場合の処理
  • スクロール時のパフォーマンス最適化

基本的な動作は問題なく、ユーザー体験が向上しました