使用锚点时如何解决顶部浮动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;}另外如果需要加上平滑滚动效果的话，可以点击查看
在线 演示结果
或者在线 演示代码
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Lösung für das Problem, dass das chinesische Sprachpaket nicht auf einem Win11-System installiert werden kann
Mar 09, 2024 am 09:48 AM
Lösung für das Problem, dass das Win11-System das chinesische Sprachpaket nicht installieren kann. Mit der Einführung des Windows 11-Systems begannen viele Benutzer, ihr Betriebssystem zu aktualisieren, um neue Funktionen und Schnittstellen zu nutzen. Einige Benutzer stellten jedoch fest, dass sie das chinesische Sprachpaket nach dem Upgrade nicht installieren konnten, was ihre Erfahrung beeinträchtigte. In diesem Artikel besprechen wir die Gründe, warum das Win11-System das chinesische Sprachpaket nicht installieren kann, und stellen einige Lösungen bereit, die Benutzern bei der Lösung dieses Problems helfen. Ursachenanalyse Lassen Sie uns zunächst die Unfähigkeit des Win11-Systems analysieren
So lösen Sie den Steam-Fehlercode E20
Feb 19, 2024 pm 09:17 PM
Wenn Sie Steam zum Herunterladen, Aktualisieren oder Installieren von Spielen verwenden, werden häufig verschiedene Fehlercodes angezeigt. Unter diesen ist E20 ein häufiger Fehlercode. Dieser Fehlercode bedeutet normalerweise, dass der Steam-Client Probleme beim Aktualisieren des Spiels hat. Glücklicherweise ist es jedoch nicht so schwierig, dieses Problem zu beheben. Zunächst können wir die folgenden Lösungen ausprobieren, um den Fehlercode E20 zu beheben: 1. Starten Sie den Steam-Client neu: Manchmal kann dieses Problem durch einen direkten Neustart des Steam-Clients gelöst werden. Im Steam-Fenster
Fünf Tipps, die Ihnen zeigen, wie Sie das Problem lösen können, dass sich das Black Shark-Telefon nicht einschaltet!
Mar 24, 2024 pm 12:27 PM
Da sich die Smartphone-Technologie ständig weiterentwickelt, spielen Mobiltelefone eine immer wichtigere Rolle in unserem täglichen Leben. Als Flaggschiff-Telefon mit Schwerpunkt auf Spieleleistung erfreut sich das Black Shark-Telefon bei Spielern großer Beliebtheit. Manchmal sind wir jedoch auch mit der Situation konfrontiert, dass das Black Shark-Telefon nicht eingeschaltet werden kann. Zu diesem Zeitpunkt müssen wir einige Maßnahmen ergreifen, um dieses Problem zu lösen. Als Nächstes geben wir Ihnen fünf Tipps, wie Sie das Problem lösen können, dass sich das Black Shark-Telefon nicht einschaltet: Schritt 1: Überprüfen Sie zunächst die Akkuleistung. Stellen Sie zunächst sicher, dass Ihr Black Shark-Telefon über genügend Strom verfügt. Möglicherweise ist der Akku des Telefons leer
Wie kann das Problem des automatischen Speicherns von Bildern beim Veröffentlichen auf Xiaohongshu gelöst werden? Wo ist das beim Posten automatisch gespeicherte Bild?
Mar 22, 2024 am 08:06 AM
Durch die kontinuierliche Entwicklung der sozialen Medien ist Xiaohongshu zu einer Plattform für immer mehr junge Menschen geworden, auf der sie ihr Leben teilen und schöne Dinge entdecken können. Viele Benutzer haben beim Posten von Bildern Probleme mit der automatischen Speicherung. Wie kann man dieses Problem lösen? 1. Wie kann das Problem des automatischen Speicherns von Bildern beim Veröffentlichen auf Xiaohongshu gelöst werden? 1. Cache leeren Zuerst können wir versuchen, die Cache-Daten von Xiaohongshu zu löschen. Die Schritte sind wie folgt: (1) Öffnen Sie Xiaohongshu und klicken Sie auf die Schaltfläche „Mein“ in der unteren rechten Ecke. (2) Suchen Sie auf der persönlichen Center-Seite nach „Einstellungen“ und klicken Sie darauf. (3) Scrollen Sie nach unten und suchen Sie nach „; Option „Cache löschen“. Klicken Sie auf „OK“. Nachdem Sie den Cache geleert haben, geben Sie Xiaohongshu erneut ein und versuchen Sie, Bilder zu posten, um zu sehen, ob das Problem mit dem automatischen Speichern behoben ist. 2. Aktualisieren Sie die Xiaohongshu-Version, um sicherzustellen, dass Ihr Xiaohongshu
Der Treiber kann auf diesem Gerät nicht geladen werden. (Persönlich getestet und gültig)
Mar 14, 2024 pm 09:00 PM
Jeder weiß, dass das Gerät möglicherweise nicht richtig funktioniert oder nicht richtig mit dem Computer interagiert, wenn der Computer den Treiber nicht laden kann. Wie lösen wir also das Problem, wenn auf dem Computer eine Meldung angezeigt wird, dass der Treiber auf diesem Gerät nicht geladen werden kann? Der unten stehende Editor zeigt Ihnen zwei Möglichkeiten, wie Sie das Problem einfach lösen können. Der Treiber kann auf diesem Gerät nicht geladen werden. Lösung 1. Suchen Sie im Startmenü nach „Kernel Isolation“. 2. Deaktivieren Sie die Speicherintegrität. Die Meldung oben lautet: „Die Speicherintegrität wurde deaktiviert. Ihr Gerät ist möglicherweise anfällig.“ Klicken Sie einfach darauf und ignorieren Sie es. 3. Das Problem kann nach einem Neustart der Maschine behoben werden.
So lösen Sie verstümmelte chinesische Zeichen unter Linux
Feb 21, 2024 am 10:48 AM
Das verstümmelte Linux-Chinesisch-Problem ist ein häufiges Problem bei der Verwendung chinesischer Zeichensätze und Kodierungen. Verstümmelte Zeichen können durch falsche Dateikodierungseinstellungen, nicht installiertes oder eingestelltes Systemgebietsschema, Konfigurationsfehler bei der Terminalanzeige usw. verursacht werden. In diesem Artikel werden mehrere gängige Problemumgehungen vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Überprüfen Sie die Dateikodierungseinstellung. Verwenden Sie den Dateibefehl im Terminal, um die Kodierung der Datei anzuzeigen: file-ifilename
Teilen Sie die Methode zur Lösung des Problems, dass PyCharm nicht geöffnet werden kann
Feb 22, 2024 am 09:03 AM
Titel: So lösen Sie das Problem, dass PyCharm nicht geöffnet werden kann. PyCharm ist eine leistungsstarke integrierte Python-Entwicklungsumgebung, aber manchmal kann es vorkommen, dass PyCharm nicht geöffnet werden kann. In diesem Artikel stellen wir einige gängige Problemumgehungen vor und stellen spezifische Codebeispiele bereit. Ich hoffe, das hilft denjenigen, die auf dieses Problem stoßen. Methode 1: Cache leeren Manchmal können die Cache-Dateien von PyCharm dazu führen, dass das Programm nicht normal geöffnet wird. Wir können versuchen, den Cache zu leeren, um dieses Problem zu lösen. Werkzeug
Was tun, wenn pagefile.sys zu viel Platz beansprucht?
Feb 20, 2024 am 09:01 AM
Was soll ich tun, wenn pagefile.sys zu viel Speicherplatz beansprucht? Bei der Nutzung des Computers kommt es häufig vor, dass nicht genügend Speicher vorhanden ist. Um dieses Problem zu lösen, überträgt das Betriebssystem einen Teil der Daten im Speicher in eine spezielle Datei auf der Festplatte. Diese Datei heißt pagefile.sys. Manchmal stellen wir jedoch fest, dass die Datei pagefile.sys sehr groß ist und zu viel Speicherplatz beansprucht. Wie lösen wir dieses Problem? Zuerst müssen wir die Datei pagefile.sys klären
