使用锚点时如何解决顶部浮动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;}另外如果需要加上平滑滚动效果的话，可以点击查看
在线 演示结果
或者在线 演示代码
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11系統無法安裝中文語言套件的解決方法
Mar 09, 2024 am 09:48 AM
Win11系統無法安裝中文語言包的解決方法隨著Windows11系統的推出，許多用戶開始升級他們的作業系統以體驗新的功能和介面。然而，一些用戶在升級後發現他們無法安裝中文語言包，這給他們的使用體驗帶來了困擾。在本文中，我們將探討Win11系統無法安裝中文語言套件的原因，並提供一些解決方法，幫助使用者解決這個問題。原因分析首先，讓我們來分析一下Win11系統無法
解決steam錯誤代碼E20的方法
Feb 19, 2024 pm 09:17 PM
在使用Steam進行遊戲下載、更新或安裝時，經常會遇到各種錯誤代碼。其中，常見的一個錯誤代碼是E20。這個錯誤代碼通常意味著Steam客戶端在嘗試進行遊戲更新時遇到問題。不過，幸運的是，要解決這個問題並不難。首先，我們可以嘗試下面幾種解決方案來修復錯誤代碼E20。1.重啟Steam客戶端：有時候，直接重新啟動Steam客戶端就可以解決這個問題。在Steam窗口
五招教你解決黑鯊手機開不了機的問題！
Mar 24, 2024 pm 12:27 PM
隨著智慧型手機技術的不斷發展，手機在我們日常生活中扮演著越來越重要的角色。而作為一款專注於遊戲效能的旗艦手機，黑鯊手機備受玩家青睞。然而，有時候我們也會面臨到黑鯊手機開不了機的情況，這時候我們就需要採取一些措施來解決這個問題。接下來，就讓我們來分享五招教你解決黑鯊手機開不了機的問題：第一招：檢查電池電量首先，確保你的黑鯊手機有足夠的電量。可能是因為手機電量耗盡
小紅書發布自動儲存圖片怎麼解決？發布自動保存圖片在哪裡？
Mar 22, 2024 am 08:06 AM
隨著社群媒體的不斷發展，小紅書已經成為越來越多年輕人分享生活、發現美好事物的平台。許多用戶在發布圖片時遇到了自動儲存的問題，這讓他們感到十分困擾。那麼，如何解決這個問題呢？一、小紅書發布自動儲存圖片怎麼解決？ 1.清除快取首先，我們可以嘗試清除小紅書的快取資料。步驟如下：（1）開啟小紅書，點選右下角的「我的」按鈕；（2）在個人中心頁面，找到「設定」並點選；（3）向下捲動，找到「清除快取」選項，點擊確認。清除快取後，重新進入小紅書，嘗試發布圖片看是否解決了自動儲存的問題。 2.更新小紅書版本確保你的小
無法在此裝置上載入驅動程式怎麼解決？ (親測有效)
Mar 14, 2024 pm 09:00 PM
大家都知道，如果電腦無法載入驅動程序，該設備可能就無法正常工作或與電腦進行正確的互動。那在電腦上彈出無法在此裝置上載入驅動程式的提示框，我們要如何解決呢？下面小編就教大家兩招輕鬆解決問題。 無法在此裝置上載入驅動程式解決方法 1、開始功能表搜尋「核心隔離」。 2、將記憶體完整性關閉，上方提示「記憶體完整性已關閉。你的裝置可能易受攻擊。」點擊後方忽略即可，不會對使用有影響。 3.重啟機器之後即可解決問題。
解決PyCharm無法開啟的方法分享
Feb 22, 2024 am 09:03 AM
標題：如何解決PyCharm無法開啟的問題PyCharm是一款功能強大的Python整合開發環境，但有時候我們可能會遇到無法開啟PyCharm的問題。在本文中，我們將分享一些常見的解決方法，並提供具體的程式碼範例。希望能幫助遇到這個問題的朋友們。方法一：清除快取有時候PyCharm的快取檔案可能會導致程式無法正常打開，我們可以嘗試清除快取來解決這個問題。具
pagefile.sys佔用太大怎麼辦
Feb 20, 2024 am 09:01 AM
pagefile.sys佔用太大怎麼辦在使用電腦的過程中，我們常常會遇到記憶體不足的情況。為了解決這個問題，作業系統會將部分記憶體中的資料轉移到磁碟上的一個特殊檔案中，而這個檔案就是pagefile.sys。但有時候，我們會發現pagefile.sys檔案的大小很大，佔用了太多的磁碟空間。那麼，我們該如何解決這個問題呢？首先，我們需要明確pagefile.sys文
Linux中文亂碼怎麼解決
Feb 21, 2024 am 10:48 AM
Linux中文亂碼問題是使用中文字元集和編碼時常見的一個問題。出現亂碼的原因可能是檔案編碼設定不正確，系統語言環境未安裝或未設置，以及終端顯示設定錯誤等。本文將介紹幾種常見的解決方法，並提供具體的程式碼範例。一、檢查檔案編碼設定使用file指令查看檔案編碼在終端機中使用file指令，可以檢視檔案的編碼：file-ifilename如果輸出中有"charset
