使用锚点时如何解决顶部浮动DIV的高度占用问题_html/css

回复讨论(解决方案)

首页

web前端

html教程

使用锚点时如何解决顶部浮动DIV的高度占用问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:23 AM

div 占用浮动解决高度

下面的这种效果，在点击链接时，切换到锚点上，但因为顶部存在一定高度的浮动DIV，点击后下面的DIV将会被遮挡住相应高度的位置看不到，这样的问题如何解决？困扰好久了，请大侠们出手相助啊，在此先表示感谢。如果能带平滑滚动更好

<!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;}

登录后复制

另外如果需要加上平滑滚动效果的话，可以点击查看
在线演示结果
或者在线演示代码

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7449

CakePHP 教程

1374

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

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 14, 2024 pm 09:00 PM

　　大家都知道，如果电脑无法加载驱动程序，该设备可能就无法正常工作或与计算机进行正确的交互。那在电脑上弹出无法在此设备上加载驱动程序的提示框，我们要如何解决呢？下面小编就教大家两招轻松解决问题。　　无法在此设备上加载驱动程序解决方法　　1、开始菜单搜索“内核隔离”。　　2、将内存完整性关闭，上方提示“内存完整性已关闭。你的设备可能易受攻击。”点击后方忽略即可，不会对使用有影响。　　3.重启机器之后即可解决问题。

小红书发布自动保存图片怎么解决？发布自动保存图片在哪里？ Mar 22, 2024 am 08:06 AM

随着社交媒体的不断发展，小红书已经成为越来越多年轻人分享生活、发现美好事物的平台。许多用户在发布图片时遇到了自动保存的问题，这让他们感到十分困扰。那么，如何解决这个问题呢？一、小红书发布自动保存图片怎么解决？1.清除缓存首先，我们可以尝试清除小红书的缓存数据。步骤如下：（1）打开小红书，点击右下角的“我的”按钮；（2）在个人中心页面，找到“设置”并点击；（3）向下滚动，找到“清除缓存”选项，点击确认。清除缓存后，重新进入小红书，尝试发布图片看是否解决了自动保存的问题。2.更新小红书版本确保你的小

Linux中文乱码怎么解决 Feb 21, 2024 am 10:48 AM

Linux中文乱码问题是使用中文字符集和编码时常见的一个问题。出现乱码的原因可能是文件编码设置不正确，系统语言环境未安装或未设置，以及终端显示配置错误等。本文将介绍几种常见的解决方法，并提供具体的代码示例。一、检查文件编码设置使用file命令查看文件编码在终端中使用file命令，可以查看文件的编码：file-ifilename如果输出中有"charset

解决PyCharm无法打开的方法分享 Feb 22, 2024 am 09:03 AM

标题：如何解决PyCharm无法打开的问题PyCharm是一款功能强大的Python集成开发环境，但有时候我们可能会遇到无法打开PyCharm的问题。在本文中，我们将分享一些常见的解决方法，并提供具体的代码示例。希望能帮助到遇到这个问题的小伙伴们。方法一：清除缓存有时候PyCharm的缓存文件可能会导致程序无法正常打开，我们可以尝试清除缓存来解决这个问题。具

如何解决默认网关自动消失的问题 Feb 24, 2024 pm 04:18 PM

默认网关自动消失怎么解决在现代社会中，互联网已经成为人们生活中不可或缺的一部分。无论是工作还是娱乐，我们都需要稳定的网络连接来完成各种任务。而默认网关是连接本地网络与外部互联网的关键要素之一。然而，有时我们可能会遇到默认网关自动消失的问题，导致无法上网。那么，当默认网关消失时，我们应该如何解决这个问题呢？首先，我们应该明确默认网关的概念。默认网关是一个网络路

See all articles

使用锚点时如何解决顶部浮动DIV的高度占用问题_html/css_WEB-ITnose

回复讨论(解决方案)

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题