一旦滚动页眉区域，我试图让我的导航栏粘在浏览器窗口的顶部。我从一开始就没有想到它所以我已经构建了整个东西而没有导航被“修复”。我希望我能做些什么来实现这一点，而无需重做我的一堆代码。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Joshua Huff | Designer</title></title></title>
<link rel="Stylesheet" href="css/normalize.css">
<link rel="Google Fonts" href="" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<script type="text/javascript" src="scripts/scripts.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header id="header">
<h1 id="logo">Joshua Huff</h1>
<p id="logo-caption">You've gotta keep it real.</p>
<p id="header-copyright">© Joshua Huff 2014. All rights reserved.</p>
<!-- NAVIGATION BAR -->
<nav id="menu-wrap">
<ul id="menu">
<li><a href="">Home</a></li>
<li>
<a href="">Categories ▼</a>
<ul>
<li>
<a href="">CSS ►</a>
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
</ul>
</li>
<li>
<a href="">Graphic design ►</a>
<ul>
<li><a href="">Item 21</a></li>
<li><a href="">Item 22</a></li>
<li><a href="">Item 23</a></li>
<li><a href="">Item 24</a></li>
</ul>
</li>
<li>
<a href="">Development tools ►</a>
<ul>
<li><a href="">Item 31</a></li>
<li><a href="">Item 32</a></li>
<li><a href="">Item 33</a></li>
<li><a href="">Item 34</a></li>
</ul>
</li>
<li>
<a href="">Web design ►</a>
<ul>
<li><a href="">Item 41</a></li>
<li><a href="">Item 42</a></li>
<li><a href="">Item 43</a></li>
<li><a href="">Item 44</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Work ▼</a>
<ul>
<li>
<a href="">Work 1 ►</a>
<ul>
<li>
<a href="">Work 11 ►</a>
<ul>
<li><a href="">Work 111</a></li>
<li><a href="">Work 112</a></li>
<li><a href="">Work 113</a></li>
</ul>
</li>
<li>
<a href="">Work 12 ►</a>
<ul>
<li><a href="">Work 121</a></li>
<li><a href="">Work 122</a></li>
<li><a href="">Work 123</a></li>
</ul>
</li>
<li>
<a href="">Work 13 ►</a>
<ul>
<li><a href="">Work 131</a></li>
<li><a href="">Work 132</a></li>
<li><a href="">Work 133</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Work 2 ►</a>
<ul>
<li>
<a href="">Work 21 ►</a>
<ul>
<li><a href="">Work 211</a></li>
<li><a href="">Work 212</a></li>
<li><a href="">Work 213</a></li>
</ul>
</li>
<li>
<a href="">Work 22 ►</a>
<ul>
<li><a href="">Work 221</a></li>
<li><a href="">Work 222</a></li>
<li><a href="">Work 223</a></li>
</ul>
</li>
<li>
<a href="">Work 23 ►</a>
<ul>
<li><a href="">Work 231</a></li>
<li><a href="">Work 232</a></li>
<li><a href="">Work 233 ►</a>
<ul>
<li><a href="">Work 2331</a></li>
<li><a href="">Work 2332</a></li>
<li><a href="">Work 2333</a></li>
<li><a href="">Work 2334</a></li>
<li><a href="">Work 2335</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Work 3 ►</a>
<ul>
<li>
<a href="">Work 31 ►</a>
<ul>
<li><a href="">Work 311</a></li>
<li><a href="">Work 312</a></li>
<li><a href="">Work 313</a></li>
</ul>
</li>
<li>
<a href="">Work 32 ►</a>
<ul>
<li><a href="">Work 321</a></li>
<li><a href="">Work 322</a></li>
<li><a href="">Work 323</a></li>
</ul>
</li>
<li>
<a href="">Work 33 ►</a>
<ul>
<li><a href="">Work 331</a></li>
<li><a href="">Work 332</a></li>
<li><a href="">Work 333</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li id="splitter">..</li>
</ul>
</nav>
<!-- END OF NAVIGATION BAR -->
</header>
<!-- SOCIAL MEDIA LINKS -->
<a href="https://www.facebook.com/JoshuaMichaelHuff" target="_blank" class="social-link">
<img src="images/facebook-round.png" alt="Facebook logo" id="facebook" class="social-icon" />
</a>
<a href="https://twitter.com/JoshuaHuff94" target="_blank" class="social-link">
<img src="images/twitter-round.png" alt="Twitter logo" id="twitter" class="social-icon" />
</a>
<a href="http://instagram.com/joshua_huff7812" target="_blank" class="social-link">
<img src="images/instagram-round.png" alt="Instagram logo" id="instagram" class="social-icon" />
</a>
<!-- END OF SOCIAL MEDIA LINKS -->
<!-- PAGE CONTENT -->
<div id="page-content">
<section id="column-1">
<h2>The Introduction to the Site</h2>
<p>This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.</p>
<br /><hr /><br />
<h2>The Introduction to the Site</h2>
<p>This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.</p>
<br /><hr /><br />
<h2>The Introduction to the Site</h2>
<p>This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.</p>
</section>
<section id="column-2">
<h2>The Introduction to the Site</h2>
<p>This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.</p>
<br /><hr /><br />
<h2>The Introduction to the Site</h2>
<p>This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.
This is just going to be a way for me to test the color used for paragraphs.</p>
</section>
</div>
<!-- END OF PAGE CONTENT -->
<!-- SITE FOOTER -->
<footer>
<p id="footer-copyright">© Joshua Huff 2014. All rights reserved.</p>
</footer>
<!-- END OF SITE FOOTER -->
</body>
</html>
CSS
/*****************************
GENERAL
*****************************/
body{
background: #eee;
font: 13px 'trebuchet MS', Arial, Helvetica;
}
h2 {
color: #2f2e2a;
font-size: 19px;
margin: 0;
}
p {
color: #6e6b63;
font-size: 12.5px;
margin: 0;
}
a {
color: #2A679F;
}
#page-content {
text-align: left;
width: 1000px;
height: 1100px;
/*margin: 3% 10% 5% 10%;*/
margin: 3% auto;
}
#column-1 {
float: left;
width: 480px;
margin-left: 5px;
/*padding-right: 14px;
border-right: 1px solid #8e8e8d;*/
}
#column-2 {
float: right;
width: 480px;
margin-right: 5px;
}
/*****************************
HEADER
*****************************/
#logo {
margin: 30px 0 0 125px;
font-size: 30px;
}
#logo-caption {
margin: 0 0 0 125px;
font-size: 14px;
text-decoration: none;
}
#header-copyright {
text-align: right;
margin-top: 20px;
margin-right: 125px;
font-size: 14px;
border: none;
color: #6e6b63;
/*margin-top: 10px;
margin-left: 45px;
font-size: 14px;
border: none;
color: #6e6b63;*/
}
/*****************************
NAVIGATION BAR
*****************************/
.fixed {
position: fixed;
}
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
max-width: 1080px;
height: 38px;
margin: /*60px*/ /*30px*/ 15px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#menu:before, #menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /* IE6 only */
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /* IE6 only */
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border-left: 4px solid #aa0a0a;
_line-height: 0; /* IE6 only */
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /* IE6 only */
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
/*****************************
SOCIAL LINKS IN NAVIGATION BAR
*****************************/
#splitter {
/*margin-left: 45px;*/
margin-left: 305px;
border-right: 2px solid #171715;
font-size: 1px;
height: 38px;
}
#facebook {
margin-right: 275px;
}
#twitter {
margin-right: 225px;
}
#instagram {
margin-right: 175px;
}
.social-icon {
display: inline-block;
float: right;
/*margin-top: -95px;*/ /*Only when the nav-bar is at 60px from margin-top */
/*margin-top: -65px;*/ /*Only when the nav-bar is at 30px from margin-top */
margin-top: -50px; /*Only when the nav-bar is at 15px from margin-top */
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
/*****************************
FOOTER
*****************************/
footer {
width: 1100px;
margin: 0 auto;
padding-right: 30px;
border-top: 1px solid #8e8e8d;
}
.footer-social-link {
margin: 0 auto;
padding: 0;
}
#footer-copyright {
text-align: left;
margin-top: 30px;
margin-bottom: 20px;
font-size: 11px;
border: none;
color: #6e6b63;
}
答案 0 :(得分：1)
我认为你最好使用javascript。这是一个解决方案，依赖于jQuery将导航栏定位转换为固定，一旦到达页面顶部，并在其位置粘贴临时div以防止布局发生变化。
http://jsfiddle.net/T6nZe/523/
HTML（样本替换为你的）：
<br /><br /><br /><br />
<div class="navbar"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
CSS：
.navbar {
height: 50px;
width: 100%;
background: black;
}
.fix {
position: fixed;
}
JS：
$(function(){
var
$win = $(window),
$filter = $('.navbar'),
$filterSpacer = $('<div />', {
"class": "filter-drop-spacer",
"height": $filter.outerHeight()
});
$win.scroll(function(){
if(!$filter.hasClass('fix') && $win.scrollTop() > $filter.offset().top){
$filter.before($filterSpacer);
$filter.addClass("fix");
} else if ($filter.hasClass('fix') && $win.scrollTop() < $filterSpacer.offset().top){
$filter.removeClass("fix");
$filterSpacer.remove();
}
});
});
答案 1 :(得分：1)
这是 FIDDLE
(function($) {
$(window).scroll(function() {
if($(this).scrollTop() >= 130) {
$('#menu-wrap').addClass('fixed');
}
else {
$('#menu-wrap').removeClass('fixed');
}
});
})(jQuery);
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#header-copyright {
display: block;
text-align: right;
margin: 20px 125px 15px 0;
font-size: 14px;
border: none;
color: #6e6b63;
}
#menu {
max-width: 1080px;
height: 38px;
margin: /*60px*/ /*30px*/ 0 auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
.social-icon {
display: inline-block;
float: right;
margin-top: -34px;
padding: 3px;
}