<p>必要です。言葉と。ページがスクロールされると、行要素はビューポートの上部に固定されます。行は単語の下にある元の位置に固定されます。 <br /><br />なんとか修正できました。単語と位置: 問題はありますが、2 つの問題に直面しています:<br /></p><p><code></code><code></code></p>
ベタベタを塗ると。行では、単語の上に「ジャンプ」しますが、ビューポートの上部に固定する方法がわかりませんが、強制的にそこに留まるようになります。 word 要素の下のスティッキー度は、最初は正しい値ではありませんでした。スクロールを開始するとテキストが「揺れ」ます。正しい値は修正されています。非常にうまく機能するので、むしろ使用したいのですが、壊れてしまいます。警告クラスの場所 (赤色のフォント): にあるはずです。転写テキストの反対側 (水平方向) ですが、これら 2 つのクラスのテキストをまとめて折りたたむ固定値です。 <br /><p><br /></p><p>この「状況」の JS Bin もここにあります。 </p>
</ol>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.word {
位置: スティッキー;
トップ: 0;
z インデックス: 1;
背景色: 白;
}
。言葉 {
パディング: 1vw 3vw 2% 3vw;
}
.word-details {
ディスプレイ: フレックス;
コンテンツの位置揃え: 間のスペース;
align-items: ベースライン;
}
.transcription {
フォントの太さ: 通常;
}
。警告 {
赤色;
マージン左: 自動;
}
。ライン {
ボーダートップ: 2px ソリッド #fdb239;
}
。意味 {
リストスタイルタイプ: なし;
カウンタリセット: アイテム;
ハイフン: 自動;
フォントサイズ: calc(0.7em 1.5vw);
}
.meaning > リ {
位置: 相対的;
}
.meaning > li::before {
内容: カウンタ(アイテム);
カウンタインクリメント: アイテム;
位置: 絶対;
トップ: 0;
テキスト整列: 中央;
マージン左: calc(-0.7em - 2.5vw);
}
.意味語 {
マージントップ: 50px;
}
.文 {
リストスタイルタイプ: なし;
パディング左: 0;
フォントサイズ: calc(0.7em 1.5vw);
マージントップ: 30px;
}
.sentences > li.sentence-ru {
マージントップ: 15px;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<本体>
<div class="単語">
<span>Word</span>
<div class="単語の詳細">
<div class="transcription">/ 転写 /</div>
<div class="warning">コメント</div>
</div>
</div>
<hr class="line">
<ol class="意味">
<li class="meaning-word">意味1</li>
<ul class="sentences">
<li class="sentence-ja">Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。 Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。それは 5 世紀だけでなく、電子写植への飛躍の時代にも、本質的には変わっていないまま生き残ってきました。これは、Lorem Ipsum の一節を含む Letraset シートのリリースによって 1960 年代に普及し、さらに最近では Lorem Ipsum</li> のバージョンを含む Aldus PageMaker などのデスクトップ パブリッシング ソフトウェアによって普及しました。
<li class="sentence-ru">一般に信じられていることに反して、Lorem Ipsum は単なるランダムなテキストではありません。紀元前 45 年の古典ラテン文学にルーツがあり、2000 年以上の歴史があります。バージニア州ハンプデン・シドニー大学のラテン語教授リチャード・マクリントックは、ローレム・イプサムの一節から、より難解なラテン語の一つである consectetur を調べ、古典文学におけるこの単語の引用を調べ、疑いの余地のない出典を発見した。 Lorem Ipsum は、紀元前 45 年に書かれたキケロの『de Finibus Bonorum et Malorum』（善悪の極み）のセクション 1.10.32 と 1.10.33 に由来しています。この本は倫理理論に関する論文であり、ルネサンス時代に非常に人気がありました。 Lorem Ipsum の最初の行「Lorem ipsum dolor sit amet..」は、セクション 1.10.32 の行から来ています。</li>
</ul>
<li class="meaning-word">意味2</li>
<ul class="sentences">
<li class="sentence-ja">Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。 Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。それは 5 世紀だけでなく、電子写植への飛躍の時代にも、本質的には変わっていないまま生き残ってきました。これは、Lorem Ipsum の一節を含む Letraset シートのリリースによって 1960 年代に普及し、さらに最近では、Lorem Ipsum</li> のバージョンを含む Aldus PageMaker のようなデスクトップ パブリッシング ソフトウェアによって普及しました。
</ul>
</ol>
</ボディ>
</html></pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
スクロール中にページの上部で複数の要素を分離したままにするのは難しいため、より簡単な解決策を提案します。スティッキー バーが「ジャンプ」するのは、スクロール時にスティッキー バーの初期位置がページ上部の位置と異なるためです。
2 番目の問題は、デフォルトの本文マージン (10px) 設定により、スティッキー バーが最初は少し低くなるということです。次に、ページをスクロールします。本文の余白はすでにスクロールされており、スティッキー バーが絶対に一番上になるように設定しているため (top: 0;)、追加の 10 ピクセルを一番上にジャンプする必要があります。簡単な解決策は、本文の上マージンを 0 に設定すると、ペーストバーが常にページ上部の同じ位置に配置されるようになります。
以下は、更新されたコード スニペットです。