我有一个水平导航栏，我想在滚动时使用position:fixed来保持它，我有一个主窗口，当我们向下滚动时，不同的颜色有不同的div。我想要的是导航在滚动时匹配主div的图像，当主div结束时，再开始在该图像上滚动，就像一个循环。
这甚至可能吗？这是我使用的CSS：
#nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 7%;
text-align: center;
padding: .5em 0 1em 0;
z-index: 1;
overflow: hidden;
background-image: inherit;
}
#nav > ul {
line-height: 0px;
position: relative;
display: inline-block;
margin: 0;
height: 21px;
border-left: solid 1px rgba(192,192,192,0.35);
border-right: solid 1px rgba(192,192,192,0.35);
}
#header {
position: relative;
background-image: url('../images/header.jpg');
background-size: cover;
background-position: center center;
background-attachment: fixed;
color: #fff;
text-align: center;
padding: 2.5em 0 2em 0;
cursor: default;
}
#banner {
background: #fff;
text-align: center;
padding: 4.5em 0 4.5em 0;
}
标题和横幅是我使用的两个不同的div部分..
这是HTML即时使用。
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner">
<header>
<h2>Por<br/>Veracruz</h2>
<span class="byline"><br>Tu ayudante hallando hospedaje<br> por el estado de Veracruz!</span>
</header>
<footer>
<a href="#banner" class="button circled scrolly">Buscar!</a>
</footer>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#banner" class="scrolly">Encuentra</a></li>
<li><a href="right-sidebar.html">Aventura al Azar</a></li>
<li><a href="no-sidebar.html">Contacto</a></li>
</ul>
</nav>
</div>
<!-- Banner -->
<div id="banner">
<h2>Hola! Te ayudamos a buscar?</h2>
<div class="row half no-collapse-1">
<div class="9u">
<input type="text" name="lugar" placeholder="Ayudanos con el lugar..." align="right"/>
</div>
<div class="3u" align="left">
<h3><a href="#" class="button" align="left">Buscar!</a></h3>
<br><br>
</div>
<div id="middle" class="12u" style="background: #2b252c;">
<font color="white"><h2><u>Lugares más visitados</u></font></h2>
</div>
</div>
<!-- Carousel -->
<div class="carousel">
<div class="reel">
<article>
<a href="http://mdomaradzki.deviantart.com/art/Bueller-III-351975087" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h3><a href="#">Pulvinar sagittis congue</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="http://mdomaradzki.deviantart.com/art/Disco-351602759" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
<header>
<h3><a href="#">Fermentum sagittis proin</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="http://mdomaradzki.deviantart.com/art/The-Patina-of-Time-and-Tide-352128094" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
<header>
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="http://mdomaradzki.deviantart.com/art/Cityparts-XVIII-350427779" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
<header>
<h3><a href="#">Ultrices urna sit lobortis</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="http://mdomaradzki.deviantart.com/art/Vine-Country-381350120" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
<header>
<h3><a href="#">Varius magnis sollicitudin</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="http://mdomaradzki.deviantart.com/art/Bueller-III-351975087" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h3><a href="#">Pulvinar sagittis congue</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="http://mdomaradzki.deviantart.com/art/Disco-351602759" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
<header>
<h3><a href="#">Fermentum sagittis proin</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="http://mdomaradzki.deviantart.com/art/The-Patina-of-Time-and-Tide-352128094" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
<header>
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="http://mdomaradzki.deviantart.com/art/Cityparts-XVIII-350427779" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
<header>
<h3><a href="#">Ultrices urna sit lobortis</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
<article>
<a href="http://mdomaradzki.deviantart.com/art/Vine-Country-381350120" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
<header>
<h3><a href="#">Varius magnis sollicitudin</a></h3>
</header>
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
</article>
</div>
</div>
谢谢！