使用锚点时如何解决顶部浮动DIV的高度占用问题_html/css_WEB-ITnose
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script language=javascript src="http://www.0551jia.cn/js/jquery1.42.min.js"></script><title>测试</title><style type="text/css">* {color:#fff;}.clear { clear:both; height:0; line-height:0px; font-size:0;}#ding{position:fixed;z-index:100; background-color:#036; top:0;left:0;_position:absolute;_top:expression(documentElement.scrollTop + 0 + "px");_left:expression(documentElement.scrollLeft + 0 + "px");} #ding{width:100%;overflow:hidden; height:56px; text-align:center}.logo { background-color:#eee; height:70px; border-bottom:#d8d8d8 1px solid; margin-bottom:3px;}.navbox{ width:1100px; margin:0 auto; z-index:998;}.navboxfix{ position:fixed; left:50%; margin-left:-550px; width:1100px;top:56px; _position:relative;}.navbox {height:36px; line-height:36px; background-color:#484441; color:#FFF}.navbox dd a{display:block;width:134px; float:left; text-align:center; color:#fff}.k {height:800px; background-color:#069;}.b {height:800px; background-color:#393}</style></head><body><div id="ding"> 固定的顶 </div><div class="clear" style="height:56px;"></div><div class="logo wk cent"> 中间</div><div class="navbox"> <dl style="position:inherit"> <dd><a href="#kk1">这是1</a></dd> <dd><a href="#kk2">这是2</a></dd> <dd><a href="#kk3">这是3</a></dd> <dd><a href="#kk4">这是4</a></dd> <dd><a href="#kk5">这是5</a></dd> </dl></div><div class="k"><a name="kk1" id="kk1"></a>这是一</div><div class="b"><a name="kk2" id="kk2"></a>这是二</div><div class="k"><a name="kk3" id="kk3"></a>这是三</div><div class="b"><a name="kk4" id="kk4"></a>这是四</div><div class="k"><a name="kk5" id="kk5"></a>这是五</div><script type="text/javascript">var sft=$(".navbox").offset().top-56; //顶部固定DIV function shownav(){ var s_t= document.documentElement.scrollTop || document.body.scrollTop; if(s_t>sft){ $(".navbox").addClass("navboxfix") } else{ $(".navbox").removeClass("navboxfix") } }window.onscroll=shownav;</script></body></html>
回复讨论(解决方案)
参考:
offsetting an html anchor to adjust for fixed header
JQuery Position:Fixed 'NAVBAR' by scrolling the page
给锚点加上个下面的样式，纯css实现。
a.anchor{ display: block; position: relative; top: -92px; visibility: hidden;}另外如果需要加上平滑滚动效果的话，可以点击查看
在线 演示结果
或者在线 演示代码
存贴备用， 实际效果地址
非常感谢您的热情回复！！！
参考:
offsetting an html anchor to adjust for fixed header
JQuery Position:Fixed 'NAVBAR' by scrolling the page
给锚点加上个下面的样式，纯css实现。
a.anchor{ display: block; position: relative; top: -92px; visibility: hidden;}另外如果需要加上平滑滚动效果的话，可以点击查看
在线 演示结果
或者在线 演示代码
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1662
14
1418
52
1311
25
1261
29
1234
24
Penyelesaian kepada masalah bahawa sistem Win11 tidak dapat memasang pek bahasa Cina
Mar 09, 2024 am 09:48 AM
Penyelesaian kepada masalah sistem Win11 tidak dapat memasang pek bahasa Cina Dengan pelancaran sistem Windows 11, ramai pengguna mula menaik taraf sistem pengendalian mereka untuk mengalami fungsi dan antara muka baharu. Walau bagaimanapun, sesetengah pengguna mendapati bahawa mereka tidak dapat memasang pek bahasa Cina selepas menaik taraf, yang menyusahkan pengalaman mereka. Dalam artikel ini, kami akan membincangkan sebab mengapa sistem Win11 tidak dapat memasang pek bahasa Cina dan menyediakan beberapa penyelesaian untuk membantu pengguna menyelesaikan masalah ini. Analisis sebab Pertama, mari kita menganalisis ketidakupayaan sistem Win11 untuk
Bagaimana untuk menyelesaikan kod ralat wap E20
Feb 19, 2024 pm 09:17 PM
Apabila menggunakan Steam untuk memuat turun, mengemas kini atau memasang permainan, anda sering menghadapi pelbagai kod ralat. Antaranya, kod ralat biasa ialah E20. Kod ralat ini biasanya bermakna pelanggan Steam menghadapi masalah untuk mengemas kini permainan. Nasib baik, walaupun, ia tidak begitu sukar untuk menyelesaikan masalah ini. Mula-mula, kita boleh mencuba penyelesaian berikut untuk membetulkan kod ralat E20 1. Mulakan semula klien Steam: Kadangkala, memulakan semula klien Steam secara langsung boleh menyelesaikan masalah ini. Dalam tetingkap Steam
Lima petua untuk mengajar anda cara menyelesaikan masalah telefon Black Shark tidak dihidupkan!
Mar 24, 2024 pm 12:27 PM
Apabila teknologi telefon pintar terus berkembang, telefon bimbit memainkan peranan yang semakin penting dalam kehidupan seharian kita. Sebagai telefon perdana yang memfokuskan pada prestasi permainan, telefon Black Shark sangat digemari oleh pemain. Namun, kadangkala kita juga menghadapi situasi telefon Black Shark tidak boleh dihidupkan Pada masa ini, kita perlu mengambil beberapa langkah untuk menyelesaikan masalah ini. Seterusnya, izinkan kami berkongsi lima petua untuk mengajar anda cara menyelesaikan masalah telefon Black Shark tidak dihidupkan: Langkah 1: Periksa kuasa bateri Pertama, pastikan telefon Black Shark anda mempunyai kuasa yang mencukupi. Ia mungkin kerana bateri telefon telah habis
Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? Di manakah imej yang disimpan secara automatik semasa menyiarkan?
Mar 22, 2024 am 08:06 AM
Dengan perkembangan media sosial yang berterusan, Xiaohongshu telah menjadi platform untuk lebih ramai golongan muda berkongsi kehidupan mereka dan menemui perkara yang indah. Ramai pengguna bermasalah dengan isu autosimpan semasa menyiarkan imej. Jadi, bagaimana untuk menyelesaikan masalah ini? 1. Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? 1. Kosongkan cache Pertama, kita boleh cuba mengosongkan data cache Xiaohongshu. Langkah-langkahnya adalah seperti berikut: (1) Buka Xiaohongshu dan klik butang "Saya" di sudut kanan bawah (2) Pada halaman tengah peribadi, cari "Tetapan" dan klik padanya (3) Tatal ke bawah dan cari "; Kosongkan Cache". Klik OK. Selepas mengosongkan cache, masukkan semula Xiaohongshu dan cuba siarkan gambar untuk melihat sama ada masalah penjimatan automatik telah diselesaikan. 2. Kemas kini versi Xiaohongshu untuk memastikan bahawa Xiaohongshu anda
Pemacu tidak boleh dimuatkan pada peranti ini Bagaimana untuk menyelesaikannya? (Diuji secara peribadi dan sah)
Mar 14, 2024 pm 09:00 PM
Semua orang tahu bahawa jika komputer tidak dapat memuatkan pemacu, peranti mungkin tidak berfungsi dengan betul atau berinteraksi dengan komputer dengan betul. Jadi bagaimana kita menyelesaikan masalah apabila kotak gesaan muncul pada komputer bahawa pemandu tidak boleh dimuatkan pada peranti ini? Editor di bawah akan mengajar anda dua cara untuk menyelesaikan masalah dengan mudah. Tidak dapat memuatkan pemacu pada peranti ini Penyelesaian 1. Cari "Pengasingan Kernel" dalam menu Mula. 2. Matikan Integriti Memori, dan ia akan menggesa "Integriti Memori telah dimatikan. Peranti anda mungkin terdedah. Klik di belakang untuk mengabaikannya, dan ia tidak akan menjejaskan penggunaan." 3. Masalah boleh diselesaikan selepas menghidupkan semula mesin.
Bagaimana untuk menyelesaikan aksara Cina yang kacau dalam Linux
Feb 21, 2024 am 10:48 AM
Masalah bercelaru Cina Linux adalah masalah biasa apabila menggunakan set aksara Cina dan pengekodan. Watak bercelaru mungkin disebabkan oleh tetapan pengekodan fail yang salah, tempat sistem tidak dipasang atau ditetapkan, dan ralat konfigurasi paparan terminal, dsb. Artikel ini akan memperkenalkan beberapa penyelesaian biasa dan memberikan contoh kod khusus. 1. Periksa tetapan pengekodan fail Gunakan arahan fail untuk melihat pengekodan fail Gunakan perintah fail dalam terminal untuk melihat pengekodan fail: nama fail-fail jika terdapat "charset".
Kongsi kaedah untuk menyelesaikan masalah yang PyCharm tidak boleh dibuka
Feb 22, 2024 am 09:03 AM
Tajuk: Cara menyelesaikan masalah yang PyCharm tidak boleh dibuka ialah persekitaran pembangunan bersepadu Python yang berkuasa, tetapi kadangkala kita mungkin menghadapi masalah yang tidak dapat dibuka PyCharm. Dalam artikel ini, kami akan berkongsi beberapa penyelesaian biasa dan memberikan contoh kod khusus. Semoga ini membantu mereka yang menghadapi masalah ini. Kaedah 1: Kosongkan cache Kadangkala fail cache PyCharm boleh menyebabkan program gagal dibuka seperti biasa. Kami boleh cuba mengosongkan cache untuk menyelesaikan masalah ini. alat
Perkara yang perlu dilakukan jika pagefile.sys mengambil terlalu banyak ruang
Feb 20, 2024 am 09:01 AM
Apakah yang perlu saya lakukan jika pagefile.sys menggunakan terlalu banyak ruang Dalam proses menggunakan komputer, kita sering menghadapi memori yang tidak mencukupi. Untuk menyelesaikan masalah ini, sistem pengendalian akan memindahkan sebahagian daripada data dalam memori ke fail khas pada cakera Fail ini ialah pagefile.sys. Tetapi kadangkala, kita akan mendapati bahawa fail pagefile.sys adalah sangat besar dan mengambil terlalu banyak ruang cakera. Jadi, bagaimana kita menyelesaikan masalah ini? Pertama, kita perlu menjelaskan fail pagefile.sys
