Размещение и дизайн навигационной панели

Question

Я видел этот действительно приятный дизайн от Webey, который разместил навигационную панель централизованно, панорамируя всю страницу и вверху страницы.

Однако я не могу понять, как бар был помещен в верхнюю часть веб-страницы. Я очень благодарен за любую помощь, которую вы можете предложить. У меня нет изображения для отправки изображений, но я предоставил ссылки на панель навигации, которые у меня есть, и навигационную панель, которую я использовал в качестве примера ниже.

Пример: http://i.imgur.com/FPwSXNz.png ток: http://i.imgur.com/yj3NzRr.png

Answer 1

вот пример того, как сделать это Live demo

HTML:

<div id="fixed"> 
    My fixed bar 
</div> 

<div id="targets"> 
    <div id="target-1"> 
     <a href="#target-2">Jump to target 2</a> 
    </div> 
    <div id="target-2"> 
     <a href="#target-3">Jump to target 3</a> 
    </div> 
    <div id="target-3"> 
     <a href="#target-4">Jump to target 4</a> 
    </div> 
    <div id="target-4"> 
     <a href="#target-5">Jump to target 5</a> 
    </div> 
    <div id="target-5"> 
     <a href="#target-1">Jump to target 1</a> 
    </div> 
</div> 

CSS:

body { 
    padding:0; 
    margin:50px 0 0; 
    font-family:"Arial"; 
    font-size:1em; 
} 
a { color:#333; } 

#fixed { 
    position:fixed; 
    height:50px; 
    line-height:50px; 
    vertical-align:middle;  
    background:#000; 
    top:0; 
    left:0; 
    right:0; 
    color:#FFF; 
    padding-left:5px; 
} 
#targets div { 
    height:400px; 
    padding-left:5px; 
} 

#target-1 { background:#888; } 
#target-2 { background:#999; } 
#target-3 { background:#AAA; } 
#target-4 { background:#BBB; } 
#target-5 { background:#CCC; } 

Иным один основанный в position: fixed для нав-бар ->Live Demo