ページタイトルとページアンカーが重なる問題の解決策
P粉521748211
2023-08-21 19:18:36
<p>HTML ページの上部に固定され、高さが定義された非スクロール ヘッダーがある場合: </p>
<p>URL アンカー (<code>#fragment</code> 部分) を使用して、ブラウザをページ内の特定の位置までスクロールさせながら、固定要素の高さを考慮する方法はありますか?<strong> ヘルプJavaScript を使用せずに? </p>
<pre class="brush:none;toolbar:false;">http://example.com/#bar
</pre>
<pre>エラー (ただし一般的な動作): 正しい:
---------------------------------- ---------------- ------------------
| BAR/////////////////////// ヘッダー | /////////////////////// /// ヘッダー |
---------------------------------- ---------------- ------------------
| 残りのテキストはここにあります | | バー |
| ... | | |
| ... | | 残りのテキストはここにあります |
| ... | | ... |
---------------------------------- ---------------- ------------------
</pre>
<p><br /></p>
新しいクラスを設定できない、または設定したくない場合は、固定高さの
:target:target# を
::before# に追加できます。 ## CSS の疑似要素。##疑似クラス:
リーリー または、jQuery を使用して、:
を基準にしてページをスクロールします。 リーリー
同じ問題に遭遇しました。 この問題は、アンカー要素にクラスを追加し、トップバーの高さをpadding-topの値として使用することで解決しました。
リーリー次の CSS を使用しました:
リーリー