div가 화면 위치에 도달했을 때 div 위치가 스크롤 위치가 아님

Question

이전에 사용한 적이있는 jquery 전문가의 도움에 감사 드리며이 새로운 응용 프로그램에서는 효과가 없습니다. 내가

난 당신이 페이지를 아래로 스크롤에만 표시되고 오른쪽 내 웹 사이트 래퍼의 왼쪽에 두 개의 탭을 달성하기 위해 노력하고있어

. 그리고 탭이 화면 중앙에 도달하면 고정 위치가되어 고정 된 것처럼 보입니다. ... 아래의 일반 효과/아이디어를 참조

http://jsfiddle.net/motocomdigital/SGCHt/2/

인한 문제

위의 바이올린이 이미 작동하고 있는지 나는 질문을 부탁 해요 왜 당신은 아마 궁금해.

위의 바이올린은 창 상단에서 scrollto 위치에서 작동하기 때문에 작동합니다.

하지만 내 웹 사이트에서는이 탭이 콘텐츠 영역에만 있으며 내 머리글, 배너, 슬라이드 쇼 영역으로는 이동할 수 없습니다.

위의 jsFiddle 예제에서 헤더, 배너 또는 슬라이드 쇼가 없음을 알 수 있습니다. 탭 컨테이너 열이 위로 가기 때문에 현재 스크립트에서 문제가되지 않습니다.

다른 조합의 레이아웃이있는 아래의 피들을 보면 내 문제가 나타날 것입니다.

참고 디자인 관점에서 볼 수 있도록 탭 컨테이너 열의 주황색 배경을 제거했습니다.

1. 헤더, 탐색, 슬라이드 쇼, 고라 - http://jsfiddle.net/motocomdigital/SGCHt/3/
2. 헤더, 탐색, 고라 - http://jsfiddle.net/motocomdigital/SGCHt/4/
3. 헤더, 탐색은 - http://jsfiddle.net/motocomdigital/SGCHt/5/는

지금 바이올린이있는 아래의 탭에서 오렌지 배경을 가지고 참조 컨테이너 열을 사용하여 콘텐츠 영역 div 옆에 탭이 표시되는 방식 만 볼 수 있습니다.

SOLUTION

어떤 방법 탭에 고정 위치 설정을 추가 할 필요가 스크립트

http://jsfiddle.net/motocomdigital/SGCHt/6/

는, 상기 탭은 화면의 상부로부터 50 %에 도달 할 때. 그러나 탭 컨테이너가 창 상단까지 실행되지 않기 때문에이를 계산하는 방법을 모르겠습니다. 이것을 달성하기위한 또 다른 스크립트 방법이 있습니까?

도움을 주시면 감사하겠습니다. 고맙습니다!

Answer 1

화면 높이의 50 %를 차지하는 스크롤을 보는 대신 상단에서 콘텐츠 영역의 위치를 ​​추가 할 수 있습니다.

http://jsfiddle.net/SGCHt/7/