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

Question

我正在处理一个固定的导航栏，它在滚动时停留在屏幕顶部，但是当我为导航栏提供position:fixed 属性时，其余内容滑到它下面，我的页面失去了导航栏的高度.更具体地说，我的导航栏高 80 像素，当我更改为固定时，选框（以下 div）在导航栏下方高出 80 像素。我已经用一种“快速修复”解决了这个问题，在页面顶部添加了额外的nav-background div 和导航栏的高度，所以看起来我的导航栏没有浮动在顶部位置的任何东西之上，但是如何用“专业”的方法解决这个案子？

#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 的填充框滑到标题下方，但其内容应该在标题下方很好地对齐。

Answer 2

用这个替换你的 HTML 和 CSS 代码。有一些小的变化，但现在效果很好。`

            <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 class="marquee"></div>

` 更新 CSS -

#navbar {
margin:0px;
height:80px;
width:100%;
z-index:103;
position:fixed;
background:#CCCCCC;
top:0;
}
#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;
}
.marquee {
font-size:16px;
height:630px;
width:100%;
margin-top:80px;/*should be equal to navbar height*/
}