P粉5390555262023-08-03 11:07:47
在滾動頁面時，在頁面頂部保持幾個元素分開是很困難的，所以我建議一個更簡單的解決方案。你的貼上條的「跳躍」是因為黏貼條的初始位置與滾動時它在頁面頂部的位置不同
為了避免你的hr線消失，而滾動，我會把所有的元件，你想保持在頁面的頂部在一個容器，例如一個div，然後使該容器黏住。
第二個問題是，因為預設的body margin (10px)設定你的sticky bar在開始的時候有點低。然後我們滾動頁面-主體邊距已經被滾動過了，你設定黏條絕對在頂部(top: 0;)，所以它必須跳到頂部這額外的10px。快速修復是將body頂部邊距設為0，然後您的貼上條在頁面頂部的位置始終相同。
下面是更新後的程式碼片段。
body {
margin-top: 0;
}
.sticky-container {
position: sticky;
top: 0;
z-index: 1;
background-color: white;
}
.word {
padding: 1vw 3vw 2% 3vw;
}
.word-details {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.transcription {
font-weight: normal;
}
.warning {
color: red;
margin-left: auto;
}
.line {
border-top: 2px solid #fdb239;
}
.meaning {
list-style-type: none;
counter-reset: item;
hyphens: auto;
font-size: calc(0.7em + 1.5vw);
}
.meaning > li {
position: relative;
}
.meaning > li::before {
content: counter(item);
counter-increment: item;
position: absolute;
top: 0;
text-align: center;
margin-left: calc(-0.7em - 2.5vw);
}
.meaning-word {
margin-top: 50px;
}
.sentences {
list-style-type: none;
padding-left: 0;
font-size: calc(0.7em + 1.5vw);
margin-top: 30px;
}
.sentences > li.sentence-ru {
margin-top: 15px;
}
<html>
<body>
<div class="sticky-container">
<div class="word">
<span>Word</span>
<div class="word-details">
<div class="transcription">/ transcription /</div>
<div class="warning">COMMENT</div>
</div>
</div>
<hr class="line">
</div>
<ol class="meaning">
<li class="meaning-word">Meaning1</li>
<ul class="sentences">
<li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
<li class="sentence-ru">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</li>
</ul>
<li class="meaning-word">Meaning2</li>
<ul class="sentences">
<li class="sentence-en">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
</ul>
</ol>
</body>
</html>