유동 너비 웹 페이지를 만드는 방법은 고정 된 (고정 된) 헤더가 있습니까?

Question

이 웹 사이트의 머리글/메뉴 모음을 고정 (고정)하여 항상 화면 상단에 표시하려고 시도하고 있으며 특히 긴 웹 사이트가 '뒤로'스크롤됩니다. 이전에 고정 너비 웹 사이트에서이 작업을 수행했지만이 웹 사이트는 유동적이며 헤더를 깨지 않고이 작업을 수행 할 수 없었습니다.

누군가 내 CSS에서 어디에서/편집해야 할 필요가 있다고 말할 수 있습니까? 나는 위치를 추가 할 필요가 있다고 생각한다 : 고정; 요소 어딘가에, 아마도이 섹션에서,하지만 그것은 고정 너비 웹 사이트에서와 같은 방식으로 내 목표를 달성하지 않는 것 같습니다.

.art-header 
{ 
    margin:0 auto; 
    background-repeat: no-repeat; 
    height: 170px; 
    position:relative; 
    background-image: url('images/header.jpg'); 
    background-position: center top; 
} 

.custom-responsive .art-header 
{ 
    background-image: url('images/header.jpg'); 
    background-position: center top; 
} 

.default-responsive .art-header, 
.default-responsive #art-header-bg 
{ 
    background-image: url('images/header.jpg'); 
    background-position: center center; 
    background-size: cover; 
} 

.art-header-inner{ 
    position: relative; 
    min-width: 840px; 
    max-width: 1920px; 
    width: 50%; 
    z-index: auto !important; 
    margin: 0 auto; 
} 

Answer 1

이 시도하고 고정

.fixed { 
    position: fixed; 
    z-index: 100; 
} 

의 CSS를 추가하려면이

<div class="fixed"> 
    //div .art-header & nav .art-nav here 
</div> 

처럼 당신의 .art-header & 사업부 내부 .art-nav 및 클래스 fixed을 병합하고 약간의 마진을 .art-sheet

margin-top: 241px; /*the height of the fixed div*/ 

여기에 바이올린에 JSFIDDLE