<p>我需要。 word和。 line元素被固定到視窗的頂部時,頁面被滾動-在他們最初的位置,即行是低於單字。 <br /><br />我設法修復了。 word與position: sticky,但面臨兩個問題:<br /></p><p><code></code><code></code></p>
當我將sticky應用於。 line時,它會「跳到」單字上方,我不知道如何將其固定在視窗的頂部,但強制它保持在。 word元素下方<br />黏性原本不是正確的值-當你開始滾動時,它會「搖晃」文字。正確的值是固定的-它工作得很好,我寧願寧願使用它!然而,它打破了。 warning類別(紅色字體)的位置:它應該在。 transcription文字的對面(水平),但是固定值將這兩個類別的文字折在一起。 <br /><p><br /></p><p>這裡也是JS Bin與此「情況」。 </p><ol>
</ol>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.word {
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;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<body>
<div class="word">
<span>Word</span>
<div class="word-details">
<div class="transcription">/ transcription /</div>
COMMENT
;
在滾動頁面時,在頁面頂部保持幾個元素分開是很困難的,所以我建議一個更簡單的解決方案。你的貼上條的「跳躍」是因為黏貼條的初始位置與滾動時它在頁面頂部的位置不同
為了避免你的hr線消失,而滾動,我會把所有的元件,你想保持在頁面的頂部在一個容器,例如一個div,然後使該容器黏住。
第二個問題是,因為預設的body margin (10px)設定你的sticky bar在開始的時候有點低。然後我們滾動頁面-主體邊距已經被滾動過了,你設定黏條絕對在頂部(top: 0;),所以它必須跳到頂部這額外的10px。快速修復是將body頂部邊距設為0,然後您的貼上條在頁面頂部的位置始終相同。
下面是更新後的程式碼片段。