bootstrap中滑动监听的导航跳转问题(加入暗锚a)

   正常navbar设置class为navbar-fixed-top时,下面内容便会偏移到上方,众所周知要将内容部分也偏移margin-top:60px或padding-top:60px皆可。

    此时设置偏移的锚,点击导航会会偏移到设定的锚的下面,达不到预期的效果,此时便要设置所谓的暗锚

    在要偏移的锚前加入暗锚

<span id="tianwen" class="target-fix"></span><h4>天文学 </h4>
    设置CSS
.target-fix{
	position: relative;
	top: -60px;
	display: block;
}

    此时即可进行跳转

    当然要设定body的滚动监听 nav-exp是navbar的id

<body data-spy="scroll" data-target="#nav-exp">
代码如下 进行微调 自行测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<title>bootstrapDemo</title>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
		<style type="text/css">
			body{
				font-family: '微软雅黑';
			}
			.container{
				margin-top: 60px;
			}
			p {
				text-indent: 2em;
				line-height: 1.8rem;
				color: #333;
			}
			
			ul {
				padding-left: 45px;
			}
			.target-fix{
				position: relative;
				top: -60px;
				display: block;
			}
		</style>
		<!--[if lt IE 9]>
	      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>
	<body data-spy="scroll" data-target="#nav-exp">
		<nav id="nav-exp" class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="navbar-header">
				<a href="#" class="navbar-brand">太空科学</a>
			</div>
			<ul class="nav navbar-nav">
				<li>
					<a href="#tianwen">天文学</a>
				</li>
				<li>
					<a href="#hangtian">航天</a>
				</li>
				<li>
					<a href="#about">相关的交叉学科</a>
				</li>
			</ul>
		</nav>
		<div class="container" data-offset="0">
			<span id="tianwen" class="target-fix"></span><h4>天文学 </h4>
			<ul>
				<li>
					<b>空间天文学</b>
				</li>
			</ul>
			<p>空间天文学是指由地球外围大气层到大气层外的空间进行天文观测与研究的科学。因为大气层的存在,许多电磁波段如 Xray与红外线对天文学家来说是不透明的,即使在可见光波段,也会受到大气扰动、消光、与光害等因素影响观测品质。将观测仪器放在太空中,可以脱离大气层的对观测的限制,同时拓展天文观测的电磁窗口。1946年,美国天文学家莱曼.史匹哲首先提出在卫星轨道上设置天文台的想法[3] 。30年后,美国国家航空航天局与欧洲空间局开始合作发展日后公众熟知的哈伯太空望远镜计划,1990年哈伯进入卫星轨道,也成为第一个太空天文台,开启太空天文学的领域。太空望远镜的计划请参见太空望远镜列表。</p>
			<ul>
				<li>
					<b>行星科学</b>
				</li>
			</ul>
			<p>行星科学是研究行星(包括地球)、卫星,和行星系(特别是太阳系),以及它们形成过程的科学。它研究对象的尺度从小至微流星体到大至气态巨行星,目的在确定其组成、动力学、形成、相互的关系和历史。它是高度科技整合的学科,最初成长于天文学和地球科学[4] ,但现在包含许多学科,包括行星地质学(结合地球化学和地球物理学)、大气科学、海洋学、水文学、理论行星科学、冰川学、和系外行星[4] 。类似的学科包括关心太阳对太阳系内天体影响的太空物理学和天文生物学。还有相关于行星科学的观测和理论分支与关联性。观测的研究涉及与太空探索的结合,主要是与使用遥测技术的机器人的太空船任务,和在地面实验室所做的工作比较。理论部分涉及大量的电脑模拟和数学建模。</p>
			<ul>
				<li>
					<b>银河系天文学</b>
				</li>
			</ul>
			<p>银河系天文学是研究我们的银河系和其所有成员。相对来说星系天文学是研究在我们银河系之外,包括星系的所有成员。我们的太阳系在的星系,在很多方面是被研究得最多的星系,即使重要的部分在可见波长区域被宇宙尘遮蔽了,在20世纪发展的无线电天文学、红外线天文学、和次微米波天文学仍将被气体和尘埃遮蔽的区域首度呈现出银河系的图形。</p>
			<ul>
				<li>
					<b>星系天文学</b>
				</li>
			</ul>
			<p>星系天文学是天文学的一个分支,研究的对象是我们的银河系以外的星系(研究所有不属于银河系天文学的天体),又称河外天文学。当工作的仪器获得改善,就可以更详细的研究现在只能审视的遥远天体,因此这个分支可以再细分为更有效的近银河系外天文学和远银河系外天文学。前者的成员与对象包括星系、本星系群,距离近得可以详细研究内部的超新星遗迹、星协。后者远得只是可以测量的对象和只有最明亮的部分可以描述或研究。</p>
			<ul>
				<li>
					<b>物理宇宙学</b>
				</li>
			</ul>
			<p>物理宇宙学是天体物理学的分支,它是研究宇宙大尺度结构和宇宙形成及演化等基本问题的学科。宇宙学的研究对象是天体运动和它的第一起因,在人类历史的很长一段时期曾是形而上学的一部分。作为科学,宇宙学起源于哥白尼原则和牛顿力学,它们指出天体和地球上的物体遵守同样的物理原理并解释了天体的运动。现在这一分支被称为天体力学。一般认为,物理宇宙学起源于二十世纪的爱因斯坦广义相对论和对极远天体的天文观测。</p>
			<span id="hangtian" class="target-fix"></span><h4 style="margin-top: 20px;">航天</h4>
			<ul>
				<li><b>航天科学</b></li>
			</ul>
			<p>航天又称空间飞行或宇宙航行。“航天”系泛指航天器在太空在地球大气层以外(包括太阳系内)的航行活动,航天,粗分为载人航天和不载人航天两大类。</p>
			<ul>
				<li><b>微波遥感</b></li>
			</ul>
			<p>微波遥感是利用搭载在平台上的传感器发射和接收微波波束投射于物体表面,由其反射回的回波信号及极化、幅度信息等确定目标物的大小、形态以及移动速度的技术。根据是否发射出微波信号,可以分为主动微波遥感和被动微波遥感。</p>

			<ul>
				<li><b>行星地质学</b></li>
			</ul>
			<p>行星地质学(Planetary Geology),亦称为天体地质学(Astrogeology)、天文地质学(Exogeology),是行星科学的一个重要分支学科,研究的范围是行星、卫星、小行星、彗星以及陨石等天体的地质。</p>

			<span id="about" class="target-fix"></span><h4 style="margin-top: 20px;">相关的交叉学科</h4>
			<ul>
				<li><b>天体生物学</b></li>
			</ul>
			<p>天体生物学,旧称外空生物学,是一门研究在宇宙中生命起源、生物演化、分布和未来发展的交叉学科,并不只限于地外生物,或包括对地球生物的研究。在天体物理学上,指研究天体上存在生物的条件及探测天体上是否有生物存在,研究太阳系除地球外其他行星及其卫星上和其他恒星的行星系上可能存在生命现象的理论,以及探讨探测方法和手段的[5] 。 地外生物学是天体生物学的子集,研究范围较为专门:包括在地球以外寻找生命,以及地外环境对生物的影响。</p>
			<p>天体生物学综合物理学、化学、生物学、分子生物学、生态学、行星科学、地理学与地质学多个方面,焦点研究在探讨生命的起源、散布和演进,探讨在其他世界是否可能有生命存在,帮助辨识与地球生物圈环境不同的其他生物圈[6] 。</p>
			<p>一些天体生物学的研究课题包括:</p>
			<p>什么是生命?</p>
			<p>生命怎样在地球诞生?</p>
			<p>生命能忍受怎样的环境?</p>
			<p>我们怎样才能决定生命有否在其他星球上存在?能找到复杂生命体的机会有多大?</p>
			<p>在其他星球上,构成生命的基本物质会是什么?(是否基于脱氧核糖核酸/碳?生理学?)</p>
			<ul>
				<li><b>天体化学和宇宙化学</b></li>
			</ul>
			<p>天体化学研究宇宙中元素和分子的丰度,以及它们和辐射的相互作用;还研究星际间气体和尘埃间的相互作用,特别是分子气体云的形成、相互作用和毁灭。天体化学和天文学以及化学有相互交叉之处。天体化学的研究范围包含了太阳系行星际物质和星际物质。而研究陨石等太阳系物质元素丰度和同位素比例的学科又被称为“宇宙化学”;研究星系物质中原子和分子以及前述物质和辐射相互作用的学科有时候称为“原子和分子天文物理学”。天体化学最主要研究星际分子云的形成、组成成分、演化和最终结局,因为这些相关知识与太阳系如何形成有关联。</p>
			<p>许多年来,天文学家缺少星际间的化学知识,认为星际间只是黑暗,无物。1950至60年代出现射电天文学,开始有令人兴奋的发现;观察氢分子的21公分线显示星际间有丰富的氢、氦、碳、氮等的各种化合物。从空间的微波谱发现,有180种类型的碳,氮等分子的拼料。这些分子绕化学键转动时就产生能量。研究这些新发现的化合物可以为我们提供很有价值的科学信息:这些分子(化合物)很有可能是生命的先驱;由于宇宙间稀薄的气体性质使在地球上不能实现的化学反应在星际间能实现,进而令人认识新的反应过程。</p>

			<ul>
				<li><b>天体物理学</b></li>
			</ul>
			<p>天体物理学是研究宇宙的物理学,这包括星体的物理性质(光度,密度,温度,化学成分等等)和星体与星体彼此之间的相互作用。应用物理理论与方法,天体物理学探讨恒星结构、恒星演化、太阳系的起源和许多跟宇宙学相关的问题。由于天体物理学是一门很广泛的学问,天文物理学家通常应用很多不同的学术领域,包括力学、电磁学、统计力学、量子力学、相对论、粒子物理学等等。由于近代跨学科的发展,与化学、生物、历史、计算机、工程、古生物学、考古学、气象学等学科的混合,天体物理学目前大小分支大约三百到五百门主要专业分支,成为物理学当中最前沿的庞大领导学科,是引领近代科学及科技重大发展的前导科学,同时也是历史最悠久的古老传统科学。
			</p>
		</div>
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</body>
</html>





    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值