네비게이션 배경이 배경 이미지와 일치하도록합니다.

Question

나는 수평 이동 막대를 사용하여 스크롤 할 때 position:fixed을 사용하고 싶습니다. 그리고 메인 윈도우와 다른 색상을 가진 다른 div가 아래로 스크롤됩니다. 내가 원하는 것은 nav가 스크롤하는 동안 main div의 이미지와 일치하고, main 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; 
} 

헤더 및 배너는 내가 사용하는 2 개 개의 다른 사업부 섹션 .. 여기

그리고는되어 사용하여 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> 

감사합니다!

Answer 1

리뷰이 예는 도움이 당신에게있을 수 있습니다 here is link