position:sticky;が効きません。
解決方法を教えてください。
スクロールしてもstickyが効かず、通り過ぎる
サイドバー内最下部
(https://focus-coffee.com/coffee-gift-gram/)
<ul class="sidebar">
// 省略
</ul>
position: sticky;
top: 0;
list-style: none;
background: white;
padding: 20px;
counter-reset: number 0;
・flexで横並びにしているので、align-items:start;で高さを設定した
→効果なしでした。
position: sticky;によって要素を張り付かせるには,画面のスクロール量に比べて親要素の高さが十分にある必要があります.
.side内にaside.main-sidebar要素がありますが,この高さはデフォルトになっているため内容によって高さが変わります.このためスクロール量に対してasideは十分に高さが大きくならず,aside.main-sidebarの子要素であるul.sidebarはstickyが正しく適用されません.
以下のような具合でul.sidebarの直接の親であるaside.main-sidebarの高さを確保する必要があります.align-itemsは余計なので消しましょう(このプロパティはflex要素の高さを上書きします).
.with-side-wrap {
/*...*/
- align-items: flex-start;
}
+.aside.main-sidebar {
+ height: 100%;
+ }
@variant_wrap
Questioner
ありがとうございます！この方法で解決しました。