垂直滾動背景圖像與靜態導航

Question

好吧，所以我有點新的Web開發，我想做一個網站。我想要做的是有一個非常大的背景圖像，其中有圖像中的多個部分，它們都用不同的顏色標記，我想添加一個導航欄，以便每次單擊導航中的鏈接時，但導航欄保持不變，背景圖像會移動到下一部分。我嘗試編碼使用部分編號=「」但這並沒有真正的工作。我也嘗試使用jquery，但對此影響不大。

有人可以請幫忙。我一直在這一段時間。

感謝 里茲

Answer 1

最簡單的方法是使用哈希標籤，但你必須（和事實上 - 應該）拆分你的背景圖片成多塊碎片。

得到的CSS應該是這個樣子：

.clear { 
    clear: both; 
    float: none; 
} 

#nav { 
    position: fixed; 
    top: 0; 
    right: 0; 
    background-color: #fff; 
    padding: 10px 10px 10px 5px; 
} 

    #nav ul { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
    } 

     #nav ul li { 
      float: left; 
      margin: 0 0 0 10px; 
      padding: 0; 
     } 

#section1 { 
    background: #ff0000 url(/path/to/background1.jpg) top center no-repeat; 
    height: 400px; /* change to whatever it needs to be */ 
} 

#section2 { 
    background: #00ff00 url(/path/to/background2.jpg) top center no-repeat; 
    height: 400px; /* change to whatever it needs to be */ 
} 

#section3 { 
    background: #0000ff url(/path/to/background3.jpg) top center no-repeat; 
    height: 400px; /* change to whatever it needs to be */ 
} 

和HTML：

<div id="nav"> 
    <ul> 
     <li><a href="#section1">first section</a></li> 
     <li><a href="#section2">second section</a></li> 
     <li><a href="#section3">third section</a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 

<div id="section1"> ... </div> 
<div id="section2"> ... </div> 
<div id="section3"> ... </div>