최근에 새로운 유형의 스크롤링 효과를 구현하는 사이트가 많이 있습니다. HTML 스크롤 효과
먼저 초기 섹션을 스크롤 시작
자리에 (1 Z- 인덱스?) 유지 그것의 정상에 콘텐츠를 스크롤하는 동안 다음은 한 예입니다. 또한 조각을 사용하고 사용자가 스크롤 한 영역에 따라 탐색 막대를 동적으로 강조 표시합니다.몇 가지 사이트에서 유사한 기술을 사용하는 것으로 나타났습니다. 하나는 (내가 링크를 찾을 수 없습니다) 배경을 동적으로 변경합니다.
이러한 유형의 사이트에는 일반적인 기술이 사용됩니까?
처음 두 섹션은 position:fixed입니다.
이 은 페이지의 특정 위치에있는 항목을으로 수정합니다. 그들은 심지어 스크롤과 함께 움직이지 않습니다.
스크롤링 섹션은 z-index 인 position:absolute을 사용합니다.
이 문자는 fixed position보다 높은 z-index을 가지므로 잘 스크롤됩니다. 스크롤하면됩니다.
는이 작업을 수행하는 여러 가지 방법이있다, 그러나 가장 쉬운 방법은 단순히 사업부를 확인하고 CSS를
"position:fixed;"
속성을 사용하는 것입니다. 이렇게하면 div가 브라우저 창에 상대적인 위치에 정확히 고정됩니다.
div가 페이지의 나머지 부분 위에 머무를 수 있도록 z-index를 큰 값으로 설정할 수도 있습니다.
메뉴 및 헤더의 경우 position: fixed 및 z-index을 사용하는 간단한 CSS 솔루션입니다. 조각의 일에 관해서는
#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }
, 그것은 JS를 사용하여 이루어집니다 : 메뉴 화면이 큰 z-index 값을 가지고 있으며, 주요 내용은 하나 약간 낮은있는 동안 두 메뉴와 헤더는 position: fixed있다. W3Fools은 jQuery를 사용하여 동일한 작업을 수행합니다. 아마도 the script을 해독 할 수 있습니다. 문서의 스크롤 이벤트에 연결하여 요소가 뷰포트 위치보다 위에 있는지 확인하고 적절하게 조치를 취하는 것 같습니다. 상단 패널에 대한
position:fixed :
한 가지 방법은 CSS를 결합 + 자바 스크립트의이
CSS를 (jQuery를) 말할 수 있도록하는 것입니다.
jQuery offset을 사용하여 컨테이너 위치를 감지하고 "하이라이트 네비게이션"에 CSS 클래스를 적용 할 수 있습니다.