(함수(문서){
//각 챕터의 링크 위치 수집
var 위치 = [],
//메뉴 항목 수집
링크 = doc.getElementsByTagName('a'),
//챕터 제목 수집
titles = doc.getElementsByTagName('h1'),
//일시 중단된 메뉴
메뉴 = doc.getElementById('menubar'),
//현재 선택
currentItem=null;
//빨간색 스타일 추가
var addClass = 함수(요소){
currentItem && currentItem.removeAttribute('class');
element.setAttribute('class','red');
currentItem = 요소;
},
// 웹페이지가 높게 표시됩니다:
getScrollTop = 함수 (){
Math.ceil(document.body.scrollTop) 1을 반환합니다.
},
//스크롤 위치 계산
StartScroll = 함수 (){
var scrollTop = getScrollTop(),
len = titles.length,
i = 0;
//제1조
If(scrollTop>=0 && scrollTop
addClass(links[0]);
반품;
}
// 마지막
If(scrollTop>=pos[len-1]){
addClass(links[len-1]);
반품;
}
// 중간
for(;i
If(scrollTop > pos[i] && scrollTop
addClass(links[i]);
휴식;
}
}
};
//색상을 변경하려면 목록의 링크를 클릭하세요
menu.onclick=function(e){
var target = e.target || e.srcElement;
If(target.nodeName.toLowerCase() === 'a'){
//목록 항목 상태 표시
addClass(대상);
반품;
}
If(target.nodeName.toLowerCase() === 'p'){
If(target.className == '정적'){
//메뉴 숨기기
This.className = '메뉴 슬라이드인';
setTimeout(function(){
target.className = 'static toShow';
Target.innerHTML = '디스플레이';
},1000);
}else{
//메뉴 표시
target.className = 'static';
target.innerHTML = '숨기기';
This.className = '메뉴 슬라이드아웃';
}
}
}
//각 장의 초기 위치 계산
var ln = titles.length;
; while(--ln>-1){
//titles[len].offsetParent.offsetTop = 0;
pos.unshift(titles[ln].offsetTop);
}
시작스크롤();
//스크롤 듣기
window.onscroll = function(){
시작스크롤()
}
})(문서);
1. 지정된 섹션으로 자동 점프
2. 플로팅 메뉴의 항목이 왼쪽 콘텐츠에서 어느 장에 속하는지 확인합니다.
이 단계는 어렵습니다. 먼저 간단히 분석해 보겠습니다.
2.1 첫 번째 상황은 메뉴 항목을 수동으로 클릭하는 것입니다. 이것은 쉽습니다. 클릭한 요소를 식별하기만 하면 됩니다.
2.2 두 번째 경우에는 마우스 가운데 버튼을 스크롤하거나 스크롤 막대를 드래그합니다. 이때 왼쪽의 콘텐츠를 오른쪽의 메뉴 항목과 연결해야 합니다. 쉬운 것부터 시작해서 어려운 것부터 하나씩 물리쳐가며 단계적으로 구현하는 전략을 고려해 보세요.
2.2.1 먼저 제목 요소의 좌표 높이를 수집합니다. 이는 모든 h1 태그의 수직 높이입니다. 배열 1에 저장합니다.
2.2.2 메뉴 항목의 a 요소를 수집하여 배열 2에 저장합니다.
2.2.3 스크롤 이벤트를 듣고 현재 콘텐츠가 어떤 메뉴 항목에 속하는지 확인합니다.
는 에 해당합니다.
2.3 세 번째 경우는 페이지에 직접 진입했을 때의 메뉴 상태 표시입니다. 예를 들어 index.html#h3 등의 주소를 통해 진입하는 경우 메뉴의 h3이 강조 표시되어야 합니다.
3. 플로팅 메뉴 표시 및 숨기기 애니메이션을 구현합니다.
3.1 이 단계는 비교적 간단하므로 먼저 수행하는 것을 고려해 볼 수 있습니다. CSS3의 Tramsform 속성을 사용하면 간단하고 효율적입니다. 크로스 브라우저라면 호환성에 주의하세요.
변환에 주의하세요:translate3d(x-axis, y-axis, z-axis); 3D를 사용하면 하드웨어 가속을 사용하여 애니메이션 효과를 높일 수 있지만 전력 소비가 증가하므로 잘 활용하십시오! 첫 번째 매개변수는 왼쪽과 오른쪽 방향을 제어합니다. 양수이면 오른쪽으로 이동한다는 의미입니다. 사실 엄밀한 것은 아니지만, 기준점을 기준으로 판단해야 합니다. 예를 들어 요소가 정지해 있을 때 x 좌표는 0인데, x 값을 오른쪽으로 늘리고 왼쪽으로 줄입니다. , 0이 재설정됩니다.
분석이 끝나면 코드를 작성할 차례입니다. 이에 대해 할 말이 없습니다. 키보드 타이핑의 음악성을 즐겨보세요.
작성을 마친 후 미리보기를 하고 메뉴를 클릭한 후 지정된 장으로 이동하고 해당 항목을 클릭하면 빨간색으로 바뀌고 현재 페이지를 새로고침하면 종속성이 올바르게 표시됩니다. 스크롤 휠을 밀면 내용이 변경됨에 따라 메뉴 항목도 변경됩니다. 스크롤 막대를 끌면 마찬가지입니다. 마지막으로 클릭하면 메뉴가 표시되고 메뉴가 슬라이드됩니다. . 이것으로 플로팅 기능이 완료됩니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.
