일부 휠을 선택적으로 반복하는 것은 나쁜 일이 아닙니다. Aaron의 블로그는 정지 메뉴를 추가했는데, 이는 매우 키가 큰 것 같습니다. 이런 종류의 속임수는 내가 처음 본 것이 아니지만, 나는 그것을 직접 작성한 적이 없습니다. 오늘 저는이 기능에 대해 선택적으로 쓸 것입니다. 다음은이 휠의 개발 프로세스이며 요구 사항 문서의 분석 및 구현 프로세스로 간주 될 수 있습니다.
데모 주소 : http://sandbox.runjs.cn/show/to8wdmuy
소스 코드 다운로드 : https://github.com/bjtqti/floatmenu
첫 번째 단계는 DOM 섹션 구조를 만드는 것입니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> AppCarrier </title>
<link rel = "Stylesheet"href = "menu.css">
</head>
<body>
<div id = "content">
<h1 id = "test1"> test1 </h1>
<p> 과거는 아프다. 그러나 당신은 그것에서 달리거나 배울 수 있습니다 </p>
<p> 과거는 고통 스러웠지만 탈출하거나 자라는 </p>
<p> 하나는 그것을 피하기 위해 걸리는 도로에서 그의 운명을 만난다 </p>
<p> 그것은 종종 운명을 피하는 길에 있지만, 예기치 않게 만난다 </p>.
<p> 규칙은 깨지기위한 것입니다 </p>
<p> 규칙이 깨져야합니다. </p>
<p> 년은 피부를 주름지게 할 수 있지만 열정을 포기하는 것은 영혼을 주름지게합니다. </p>
<p> 시간이 지남에 따라 얼굴이 늙게 만들어 지지만 열정은 더 이상 마음을 더 시들게 만들지 않습니다. </p>
<h1 id = "test2"> test2 </h1>
<p> 당신이 배운 지식을 지속적으로 연습함으로써 당신은 진정으로 그것을 마스터 할 수 있습니다. </p>
<p> 매일 최대한 살고 있습니다. </p>
<p> 매일 즐기십시오. </p>
<p> 별을 주시하고 발을 땅에 두십시오. </p>
<p>는 높은 야망을 가지고 발을 땅에 두십시오. </p>
<p> 항상 예상치 못한 모험을 떠나십시오. </p>
<p> 언제든지 예상치 못한 모험을 시작할 준비를하십시오. </p>
<p> 인생은 실망으로 가득합니다. 당신은 사물에 머물 수 없습니다. 계속 움직여야합니다. </p>
<p> 삶은 종종 불행하고 과거에 빠지지 않으며 용감하게 전진합니다. </p>
<p> 나는 자유 정신입니다. 나는 갇힐 수 없다. </p>
<p> 내 영혼은 자유롭고 구속되지 않아야합니다. </p>
<p> 때때로 마음은 눈에 보이지 않는 것을 봅니다. </p>
<p> 보이지 않는 사람들은 그것을 느낄 수 있습니다 </p>
<p> 단순한 것들도 가장 특별한 것들이며 현명한 사람들만이 그들을 볼 수 있습니다. </p>
<p> 가장 평범한 것은 또한 가장 특별한 것이며 현명한 사람만이 그것을 이해합니다. </p>
<h1 id = "test3"> test3 </h1>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<h1 id = "test4"> test4 </h1>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
<p> 몇 개의 xxxxxx </p>
</div>
<div id = "menubar">
<p> 숨기기 </p>
<ul>
<li> <a href = "#test1"> test1 </a> </li>
<li> <a href = "#test2"> test2 </a> </li>
<li> <a href = "#test3"> test3 </a> </li>
<li> <a href = "#test4"> test4 </a> </li>
</ul>
</div>
</body>
<script src = "menu.js"> </script>
</html>
두 번째 단계는 CSS 파일을 준비하는 것입니다.
코드 사본은 다음과 같습니다.
ul {
목록 스타일 유형 : 없음;
}
A {
텍스트 결정 : 없음;
}
/*기사 내용 영역*/
#콘텐츠 {
너비 : 400px;
여백 : 0 Auto;
글꼴 크기 : 2EM;
}
/*플로팅 메뉴*/
.menu {
위치 : 고정;
상단 : 20%;
오른쪽 : 0;
너비 : 200px;
테두리 : 1px 단단한 회색;
Border-Radius : 5px;
}
.menu li {
높이 : 2em;
라인 높이 : 2em;
}
.빨간색 {
색상 : 빨간색;
}
.숨다 {
디스플레이 : 없음;
}
/*부동 메뉴 숨기기*/
.slidein {
변환 : translate3d (202px, 0, 0);
전환 기간 : .5S;
}
/*떠 다니는 메뉴 표시*/
.slideout {
변환 : translate3d (0, 0, 0);
전환 기간 : .5S;
}
.Static {
색상 :#007aff;
텍스트 정렬 : 센터;
}
/*떠 다니는 공을 보여주세요*/
.TOSHOW {
디스플레이 : 블록;
너비 : 4.8em;
높이 : 2em;
라인 높이 : 2em;
Border-Radius : .5EM;
테두리 : 1px 단단한 회색;
변환 : translate3d (-5em, 0, 0);
전이 기간 : 1s;
}
세 번째 단계는 JS 코드 작성을 시작합니다.
코드 사본은 다음과 같습니다.
(기능 (doc) {
// 각 장의 링크 위치를 수집합니다
var pos = [],
// 메뉴의 항목 모음
links = doc.getElementsByTagName ( 'a'),
// 장의 제목을 수집합니다
제목 = doc.getElementsByTagName ( 'h1'),
// 매달린 메뉴
menu = doc.getElementByid ( 'menubar'),
// 현재 선택
currentItem = null;
// 빨간색 스타일을 추가합니다
var addClass = function (요소) {
currentitem && currentitem.removeattribute ( 'class');
요소 .setAttribute ( 'class', 'red');
currentItem = 요소;
},
// 웹 페이지가 높이 롤아웃되었습니다.
getscrolltop = function () {
return math.ceil (document.body.scrolltop) +1;
},
// 스크롤 위치를 계산합니다
STARTCROLL = function () {
var scrolltop = getscrolltop (),
len = titles.length,
i = 0;
// 제 1 조
if (scrolltop> = 0 && scrolltop <pos [0]) {
AddClass (링크 [0]);
반품;
}
// 마지막
if (scrolltop> = pos [len-1]) {
addClass (링크 [LEN-1]);
반품;
}
//가운데
for (; i <len; i ++) {
if (scrolltop> pos [i] && scrolltop <pos [i+1]) {
addClass (링크 [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 == 'static') {
// 메뉴를 숨 깁니다
this.classname = '메뉴 슬라이드 핀';
settimeout (function () {
target.className = '정적 Toshow';
target.innerhtml = 'show';
}, 1000);
}또 다른{
// 메뉴 표시
target.className = '정적';
target.innerhtml = '숨기기';
this.className = '메뉴 슬라이드 아웃';
}
}
}
// 각 장의 초기 위치를 계산합니다
var ln = titles.length;
while (-ln> -1) {
//titles] len] .offsetparent.offsettop = 0;
pos.unshift (제목 [ln] .offsettop);
}
StartsCroll ();
//스크롤
window.onscroll = function () {
STARTSCROLL ()
}
})(문서);
분석 :
1. 지정된 섹션으로 자동 점프를 구현하십시오
이 단계는 <a> 태그의 앵커 함수를 사용하여 수행 할 수 있습니다. HTML5는 향후 이름 속성을 지원하지 않기 때문에 (HTML5는 지원하지 않습니다. 앵커의 이름을 지정하십시오.) ID를 사용하여 점프를 고려하십시오.
2. 왼쪽의 내용의 어떤 장이 부유 식 메뉴의 항목에 속한 지 식별하십시오.
이 단계는 어려운 점입니다. 간단히 분석하겠습니다.
2.1 첫 번째 경우는 메뉴 항목을 수동으로 클릭하는 것입니다. 이것은 쉬운 일입니다. 클릭 한 요소를 식별하십시오.
2.2 두 번째 경우, 중간 마우스 버튼을 통해 스크롤바를 스크롤하거나 드래그하십시오. 현재 왼쪽의 내용과 오른쪽의 메뉴 항목을 연관시켜야합니다. 이것은 가장 어려운 부분입니다. 쉽고 어려운 것으로 시작하여 단계별로 구현하는 전략을 고려하십시오.
2.2.1 먼저 제목 요소의 좌표 높이를 수집합니다. 이것이 모든 H1 태그의 수직 높이입니다. 배열 1.
2.2.2 메뉴 항목의 요소 A를 수집하여 배열 2에 저장하십시오.
2.2.3 스크롤 이벤트를 듣고 현재 내용이 속한 메뉴 항목을 결정하십시오.
한 걸음 단계를 밟을 때는 원고 용지에 그림을 그리는 것이 좋습니다.
A1
******************
* A2
*
******************
* A3
*
******************
*
* A4
*
스크롤 할 때마다 현재 스크롤 거리가 어떤 범위인지 결정합니다. 0에서 a1이면 1 장, A1 ~ A2, 2 장 등입니다.
요소의 위치 높이와 관련하여, 나는 단순히 요소를 사용하여 여기에 가져 오기 위해 단순히 요소를 사용합니다. 호환성 문제가있을 수 있습니다. jQuery를 사용하는 경우 $ ( 'element'). Offset (). 상단이어야합니다.
마찬가지로, 나는 단순히 document.body.scrolltop을 사용하여 스크롤 바의 높이를 얻었습니다. jQuery로 대체되면 $ (창) .scrolltop ();
그림의 목적은 추상적 인 문제를 구체화하고 규칙을 생각하고 찾는 데 도움이되는 것입니다. 어쩌면 "모델링"이라고 부르면 키가 커질 것입니다.
배열 1과 배열 2의 관계는 하나씩 일치해야한다는 점을 강조해야합니다. 예를 들어, 해당 <a href = "#h1">은 <h1 id = "h1">입니다.
2.3 세 번째 경우, 페이지를 직접 입력 할 때 메뉴 상태 표시기. 예를 들어, index.html#h3과 같은 주소를 통해 입력하면 메뉴의 H3을 강조 표시해야합니다.
3. 플로팅 메뉴의 디스플레이를 구현하고 애니메이션을 숨 깁니다.
3.1이 단계는 비교적 간단해야합니다. 먼저 수행하는 것을 고려할 수 있습니다. CSS3의 Tramsform 속성 만 사용하십시오. 간단하고 효율적입니다. 크로스 브라우저라면 호환 되십시오.
Transform : Translate3d (x 축, Y 축, Z 축); 3D를 사용하면 하드웨어 가속을 사용하여 애니메이션 효과를 증가시킬 수 있지만 전력 소비가 증가하므로 잘 활용하십시오! 첫 번째 매개 변수는 왼쪽 및 오른쪽 방향을 제어하는 것입니다. 긍정적 인 경우 오른쪽으로 이동하는 것을 의미하며 부정적인 경우 왼쪽으로 이동하는 것을 의미합니다. 이것은 실제로 엄격하지 않습니다. 실제로 참조 점을 기준으로 결정해야합니다. 예를 들어, 요소의 x 좌표가 0이면 x 값이 오른쪽으로 증가하고 왼쪽으로 감소되고 0이 재설정됩니다.
분석 후 코드가 작성됩니다. 이것에 대해 할 말이 없습니다. 키보드를 입력하여 생성 된 음악적 느낌을 즐기십시오.
작성 후 미리보기 후 메뉴를 클릭하고 지정된 장으로 점프 한 다음 항목을 클릭하여 빨간색을 돌리고 현재 페이지를 새로 고치면 종속성 디스플레이가 올바르게됩니다. 스크롤 휠을 밀면 메뉴 항목이 그에 따라 콘텐츠 변경에 따라 변경됩니다. 스크롤 막대를 드래그하십시오. 마찬가지입니다. 마지막으로 클릭하여 숨기고 메뉴를 후퇴하고 클릭하여 표시되면 메뉴가 미끄러 져 나옵니다. 서스펜션 기능이 완료됩니다.
위의 것은이 기사에 관한 모든 것입니다. 나는 당신이 그것을 좋아하기를 바랍니다.