Penyelesaian kepada masalah tajuk halaman dan sauh halaman bertindih-Soal Jawab Rangkaian PHP Cina

Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Penyelesaian kepada masalah tajuk halaman dan sauh halaman bertindih

P粉521748211 2023-08-21 19:18:36

462

Jika saya mempunyai pengepala tidak menatal dalam halaman HTML yang ditetapkan di bahagian atas, dengan ketinggian yang ditentukan:

Adakah terdapat cara untuk menggunakan sauh URL (#fragment bahagian) untuk membuat penyemak imbas menatal ke kedudukan tertentu dalam halaman tetapi masih menghormati ketinggian elemen tetap tanpa menggunakan JavaScript?

http://example.com/#bar  Ralat (tetapi tingkah laku biasa): Betul: +---------------------------------+ +-------------- -------------------+ |.///////////////////////////////////// /// pengepala | +---------------------------------+ +-------------- -------------------+ |. teks selebihnya di sini | |. ... | |. ... | |. ... | +---------------------------------+ +-------------- -------------------+

P粉521748211

membalas semua (2)

P粉2855875902023-08-22 17:09:27 Tingkat 2

Jika anda tidak boleh atau tidak mahu menetapkan kelas baharu, anda boleh mencipta kelas pseudo dalam CSS untuk::before伪元素添加一个固定高度的:target:

:target::before { content: ""; display: block; height: 60px; /* 固定的标题高度 */ margin: -60px 0 0; /* 负的固定标题高度 */ }

Atau gunakan jQuery untuk menatal halaman relatif kepada:target:

var offset = $(':target').offset(); var scrollto = offset.top - 60; // 减去固定的标题高度 $('html, body').animate({scrollTop:scrollto}, 0);

Suka+0

Tambah Balasan

P粉9869374572023-08-22 09:39:10 Tingkat 1

Saya mengalami masalah yang sama. Saya menyelesaikan masalah ini dengan menambah kelas pada elemen anchor dan menggunakan ketinggian bar atas sebagai nilai padding-top.