부트 스트랩 3 내비게이션이 올바르게 전환되지 않습니다.

Question

부트 스트랩 3으로 놀아 왔고 내 HTML의 초기 헤더 섹션을 스크롤 한 후 상단에서 전환되는 navbar를 만들려고합니다. 나는 거의 다 왔어. 나는 'affix'를 사용하여 스크롤 한 다음 성공적으로 탐색 막대를 추가했으며 전환과 함께 어느 정도 성공했습니다. 그러나 나는 아직도 2 (나는 사소한 희망) 문제를 가지고있다.

1) 전환이 너무 일찍 시작됩니다. (예 : navbar가 오기 전에 내 머리글을 통과하지 못했습니다.)

2) 전환이 올바르게 전환되지 않고 애니메이션으로 전환되는 대신 스냅 아웃됩니다.는 http://bootply.com/104811

사람이 내가 잘못 갔어요 어디 있는지 말해 수 : 여기

내가 작성한 코드?

도움이 되셨다면

감사합니다.

Answer 1

DEMO

1 ) 컨테이너처럼 접사에 오프셋을 적용 할 머리글 아래의 요소를 사용합니다. 픽셀 수를 offset: { top: 100 }으로 하드 코딩하십시오. 내가 밖으로이 하나의 생각 생각

$('#nav').affix({ 
    offset: { top: $('#some-lower-element').offset().top } 
}); 

2) ...

당신이 볼 수 탐색을 유지하는 경우 (position: fixed 및 top: -50 (과) visibility: hidden을 제거 단지 화면 상단) 여전히 transition 위 위로 스크롤 할 때 작동합니다.

#nav{ 
    position: fixed; 
    width: 100%; 
    top:-50px; 
    transition: top 1s; 
    -webkit-transition: top 1s; /* Safari */ 
}