我正試圖創建一個帶有 "粘性 "標題的可滾動串列。到目前為止，該功能似乎是有效的，但是有一些視覺問題。
該串列本身是基于一個標有ul的Bootstrap 5類list-group。
當我開始滾動時，兩級標題如預期的那樣 "粘 "在一起
當我開始滾動時，兩級標題如預期的那樣 "粘 "在一起
正如你從截圖中看到的，"卡住 "的標題之間的邊界消失了。我的理解是，這是瀏覽器默認行為的一部分，而且它并沒有真正困擾我。然而，如果我繼續滾動，使第二個First Level標題粘住，該行為就不再一致了。頂部的邊框消失了，取而代之的是一個分隔兩個 "卡住 "的標題的邊框。
如果我繼續滾動，問題依然存在
完整的源代碼。 JSFiddle
我不確定這是否是 "預期 "的行為，或者我是否能以某種方式解決它？
uj5u.com熱心網友回復：
這里的問題是，只有第一個.list-group-item有一個頂部邊框。
您可以通過在每個.sticky-*元素中添加.border-top來解決這個問題。
< li class="list-group-item sticky-top sticky-first border-top"/span>>. ...</li>
https://jsfiddle.net/krxfsgp9/
或者...
如果你使用SASS，你可以在你的自定義類規則中擴展.border-top和.sticky-top。
.sticky-first,
.sticky-second {
@extend .sticky-top;
@extend .border-top;
top: 0;
}
.sticky-second {
top: 41px;
然后像這樣使用：
<li class="list-group-item sticky-first" > . ...</li>。
<li class="list-group-item sticky-second"/span>>. .</li>/span>。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/309205.html
標籤：