2012-11-21 2 views
1

입니다. 아이폰 Instagram 앱과 마찬가지로 몇 달 전 getting sticky headers to switch out에 대한 질문을 던졌습니다. 누군가 제가 제 질문에 정확히 대답했을 때 기뻤습니다. 불행하게도 나는 다른 환경에서 그것을 가지고 놀고 있었고 나는 그것을 작동시키지 못했다. 여기에 작품을 원본입니다 : (http://codepen.io/chrissp26/full/gBrdo)2 개의 끈적한 헤더가 있습니다. 하나는 바뀌고, 하나는

다음

무엇을 행동하는 것입니다이 : 기본적으로 (http://codepen.io/anon/full/sAHuy)

나는 동안, 스위치가 첫 번째 예에서와 같이 '밀어'하는 서브 헤더가 필요합니다 메인 헤더 섹션을 유지, 상단에 섹션, 동일합니다. 서브 섹션은 메인 헤더 아래로 밀어 넣을 필요가 있습니다.

도움을 주시면 대단히 감사하겠습니다.

+0

@chris가 제공하는 스크립트가 무엇인지 알고 계시나요? – PeeHaa

+0

다소. 밀어 올릴 때 스타일을 고정에서 절대로 전환합니다. – ryanSrich

+0

@ryanSrich, 질문에 관련 코드를 게시하십시오 – Alexander

답변

2

jQuery 코드는 요소가 화면 상단에 닿기를 기다리지 만 사용자가 CSS에 명시한 것처럼 상단에서 45 픽셀을 기다리지 않습니다. 322 ~ 337 행을 참조하십시오.

+0

코드가 표시됩니다. scrollTop을 변경해야합니까? 어쨌든 나는 당신이 제안한 것처럼 45 픽셀을 낮추거나 모든 것을 다시 써야 할 필요가 있다고 생각합니까? – ryanSrich

+0

요소가 화면 상단에서 0px인지 확인하는 부분을 다시 작성하십시오. 현재 스크립트는 고정 된 위치가 상단에 도달 할 때까지 추가하지 않습니다. – GiantDuck

+0

"top : 45px;"를 추가하려고했습니다. 하지만 아무것도하지 않는 것 같습니다. 나는 또한 scrollTop()에 45px를 추가하려고 시도했다. 하지만 아무것도 아니야. jQuery에서 간격을 어디에 추가해야합니까? ... http : //codepen.io/anon/pen/sAHuy – ryanSrich

관련 문제