Sticky.js 너비 : 100 % nav이 브라우저의 크기를 조정 한 후 100 % 더 이상 사용 안 함

Question

이 사이트에서 탐색 바를 매우 모방 한 너비 : 100 % 탐색 모음을 구현했습니다 (http://halfcreative.themes.bitfade.com/).

내비게이션 막대가 페이지 상단에 도달하면 탐색 막대가 고정되고 Anthony Garand의 sticky.js 플러그인에 의해 성공적으로 구현됩니다. 그래서 아무런 문제도 없습니다.

그러나 나비가 "끈적"으로 만들어 졌을 때 브라우저의 크기를 조정할 때 문제가 발생합니다. 너비가 줄어들어 100 % 스타일을 잃어 버렸을뿐입니다. 아래로 스크롤하여 sticky.js를 활성화하지 않으면 반응이 좋습니다.

JSFiddle (아래 링크)을 설정했습니다. 왜 이런 일이 일어나는거야?

http://jsfiddle.net/shRzE/1/

내 HTML 마크 업의 일부를

<nav class="nav" id="sticky-navigation"> 

      <div class="navigation inner"> 
       <ul> 
        <li><a rel="competition" href="">Competition</a></li> 
        <li><a rel="worldbid">The Bid</a></li> 
        <li><a rel="logistics" href="">Logistics</a></li> 
        <li><a rel="workflow" href="">Workflow</a></li> 
        <li><a rel="lens" href="">Lens to Living Room</a></li> 
        <li><a rel="build" href="">The Build</a></li> 
       </ul> 
      </div> 
     </nav> 

주

: 나는 당신이 다음 가능한 한 "결과"사각이 큰 만들 경우이 문제를 최선을 볼 수 찾을 수 있습니다. 메뉴는 화면의 중앙에 수직이고 탐색 100 % 잘 작동 볼 수있는 "결과"상자의 크기를 조정할 수 있도록 반 영역은 빨간색과 절반 지역이 될 때까지 아래로

1. 스크롤은 검은 색입니다.

2. nav가 창 맨 위에 튀어 나올 때까지 계속 스크롤합니다. 그런 다음 "결과"상자의 크기를 다시 조정하여 더 이상 크기가 제대로 조정되지 않는지 확인하십시오.

참고 : 나는 또한 부트 스트랩 부착을 구현하고 정확히 같은 문제가 있었다.

Answer 1

에 한번이 같은

left: 0px; 
right: 0px; 

당신의 위치 고정 요소에

, 그래서 뭔가를 추가 :

#element { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
} 

어떤 이유로 position: fixed; 요소의 폭이 브라우저에 의해 등록되는되지 않은 것으로 보인다 왼쪽 및 오른쪽 위치를 뷰 포트의 가장자리에 뿌리면 브라우저가 요소의 너비를 항상 알고 브라우저가 콘텐츠를 올바르게 가운데에 맞출 수 있습니다. 를 호출 할 때 JQuery와 옵션을 추가

Answer 2

시도 : #topBar이 끈적 항목 인와 전체 폭 요소 인 .wrapper

$("#topBar").sticky({ 
    getWidthFrom: '.wrapper', 
    responsiveWidth: true 
    }); 

.