html - 如何防止页面失去固定导航栏的高度并在顶部位置滑到它下面？

Question

我正在使用一个固定的导航栏，它在滚动时停留在屏幕的顶部，但是当我为我的导航栏提供 position:fixed 属性时，其余内容会滑到它下面我的页面失去了导航栏的高度。更具体地说，我的导航栏是 80 像素高，当我变成固定的时，选框(下面的 div)在导航栏下高出 80 像素。我已经通过一种“快速修复”解决了它，添加了额外的 nav-background div，并将我的导航栏高度添加到页面顶部，所以我的导航栏似乎没有 float 高居榜首，但如何用“专业”的方法解决问题？

#navbar {
	margin:0px;
	height:80px;
	width:100%;
	z-index:103;
	background-color:rgba(255,255,255,.8);
	position:fixed;
}

#logo {
	display:inline-block;
	float:left;
	padding: 15px 0px 15px 0px;
	margin-left:100px;
}

#logo_img {
	max-height:50px;
}

#anchor-links {
	display:inline-block;
	float:right;
	height:80px;
	padding: 15px 0px 15px 0px;
	margin-right:150px;
}

.nav li {
	display:inline-block;
}

.nav a {
	text-decoration:none;
	color:#6f8595;
	font-size:16px
}

#nav-background {
	height:80px;
}

.marquee {
    border:1px solid red;
	font-size:16px;
	height:630px;
	width:100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="navbar">
			<div class="row">
				
				<div id="logo" class="logo">
					<a href="index.html"><img id="logo_img" src="img/yoursite_logo.png" alt="YourSite Logo"></a>
				</div>
		
				<div id="anchor-links">
						<ul class="nav">
							<li><a data-scroll href=".marquee">Home</a></li>
							<li><a data-scroll href="#about">About</a></li>
							<li><a data-scroll href="#services">Services</a></li>
							<li><a data-scroll href="#portfolio">Portfolio</a></li>
							<li><a data-scroll href="#footer">Contact</a></li>
						</ul>
				</div>
					
			</div>
	</div>
	<div id="nav-background" class="clearfix"></div>
	<div class="marquee"></div>

Answer 1

当您将 div 定位为固定时，它会脱离常规文档流。因此，除了在元素上设置一个或多个属性之外，没有其他方法可以补偿其高度，当浏览器呈现页面时，这些属性仍会考虑到文档流。

您提出的解决方案实际上工作正常，没有任何问题。

但是，您应该能够通过将 padding-top: 80px; 添加到 .marquee 来获得类似的结果，从而省去一个额外的 div 的麻烦仅用于文体目的。这会导致 .marquee 的填充框在标题下方滑动，但其内容应在标题下方很好地对齐。