Question

我正在使用固定导航栏，在滚动时停留在屏幕顶部，但是当我为导航栏指定position:fixed属性时，其余内容会在其下方和我的页面下滑失去了导航栏的高度。更具体地说，我的导航栏高80像素，当我更改为固定时，选框（以下div）在导航栏下高出80px。我已经通过快速修复＆＃34;解决了这个问题，添加了额外的nav-background div并将导航栏的高度添加到了我的页面顶部，所以看起来我的导航栏并没有这样做。 t漂浮在最高位置的任何位置，但我如何使用＆＃34; professional＆＃34;方法

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

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*/
}

如何防止页面松动固定导航栏的高度并在其下方滑动到顶部位置？

2 个答案: