소개
블로그를 작성할 때 많은 자막이 종종 조직에 사용됩니다. 기사가 길면 다른 타이틀 사이를 앞뒤로 셔틀해야합니다. 디렉토리를 수동으로 추가하고 앵커 포인트를 추가하면 정말로 번거 롭습니다. 이러한 이유로 디렉토리 영역을 동적으로 생성하고 Bootstrap에서 제공하는 affix 플러그인을 사용하여 페이지의 디렉토리 영역을 수정할 수 있습니다. 부트 스트랩 문서는이를 사용합니다
준비 - bootstrap.min.js 소개
botstrap.min.js를 바디 앞에서 스크립트 태그에 넣으면 당분간 Uikit.min.js가 소개되지 않습니다.
관련 플러그인을 소개 한 후, 우리의 아이디어는 먼저 기사를 기반으로 앵커 포인트와 메뉴 컨텐츠를 자동으로 생성 한 다음 문제를 추가하여 고정 효과를 생성 한 다음 Uikit의 스크롤 플러그인을 사용하는 것입니다 (부트 스트랩에는 스크롤 스피도 있으며 사용 방법은 거의 동일합니다).
접미사 사용을 소개합니다
affix 플러그인은 탐색 부품의 위치를 수정하고 사용자의 스크롤링 상황에 따라 고정 요소에 세로 오프셋을 추가하여 NAV가 세 가지 클래스 사이에서 전환하도록 도와줍니다.
1. Affix-Top : 상단에 나타납니다
2.affix : 페이지에서 스크롤하고 고정 된 속성을 추가하고 사용자 정의 오프셋을 사용하는 수단
3. Affix-Bottom : 바닥에 도달하는 것을 의미합니다
affix를 활성화하려면 다음 코드 만 필요합니다.
$ ( '#nav'). affix ({orpset : {top : $ ( 'header'). offset (). 상단, 하단 : ($ ( 'footer'). OuterHeight (true) + $ ( '. Application'). outerHeight (true (true)) + 40}});1. HTML 코드 부품을 구성합니다
<ul id = "mysidebar"> </ul>
UL을 위해 NAV 및 ATTOLS 클래스를 추가하십시오.
2. 캡슐화 코드를 생성합니다
이 코드 스 니펫을 자신의 스크립트 스크립트에 소개하십시오
; $. fn.extend ({ "createAffix": 함수 (selector) {$ list = $ ( "" + selector), length = $ list.length, affixValue = ""; for (var i = 0; i <length; i ++) {// 이름 Add attribute $ list.eq (i) .attr ( "Id", ( "node" + i)); $ list.eq (i) .text (i == 0) {affixValue + = "a href =#node" + i + "class = 'active'>" + "</a>"; }이. Appix.위의 코드의 원칙은 CreateAffix 함수의 제목 단위로 간주되어야하는 태그 또는 클래스를 전달하고 Traversal 프로세스 중에 앵커 링크를 추가하는 것입니다.
3. 사용 방법
HTML 부품 작성
<ul id = "mysidebar"> <li> <a href = "#node1"> </a> </a> </a> </a> </li> <li> a href = "#node2"> </a> </a> </a> </a> </li> <li> <a href = "#node3"> </a> </a> </li> </ul> <h3 id = "node1"> title 1 <h3> <h3> <h3> 2 </h3> <h3 id = "node3"> title 3 </h3>
JavaScript 섹션 작성
$ (function () {$ ( '#mysideBar'). createAffix ( 'h3'); // 기사에서`h3 '태그가 앵커에 추가되어야 함을 나타냅니다.});앵커 포인트 오프셋 문제를 해결하십시오
앵커 포인트는 기본적으로 앵커 요소의 상단으로 페이지를 이동시키기 때문에, 즉 제목 1에서 위의 작업을 수행하면 앵커 포인트를 클릭하면 페이지가 'Title 1'이있는 상단 위치로 이동합니다. 상단에 메뉴 표시 줄이 있으면 CSS 스타일을 설정하여 차단 및 해결됩니다.
.class { /* 패딩을 추가하면 앵커가 NUM PX를 아래쪽으로 이동시킬 수 있습니다. 즉, 메뉴 막대의 높이를 건너 뜁니다. 마진 탑을 음수 값으로 설정하여 패딩 탑으로 인한 빈 부분을 구성하십시오*/ 패딩 탑 : num px; 마진 -탑 : -num px;}스크롤 청취를 추가하십시오
현재 우리의 DOM 문서는 다음과 같습니다.
<ul id = "mysidebar"> <li> <a href = "#node1"> </a> </a> </a> <li> <a href = "#node2"> </a> </a> </li> <li> <a href = "#node3"> </a> </li> </ul>
처리하고 Uikit 속성을 소개하고 자세한 내용은 문서를 확인하십시오.
<ul id = "mysidebar"data-uk-scrollspy-nav = "{가장 가까운 : 'li', smoothscrool : true}"> <li> <a href = "#node1"> </a> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3">>>>>>>> href =uikit.min.js를 소개합니다
문서가로드 된 후 메뉴 항목 (LI)이 실행되므로 메뉴 항목이 생성되기 전에 Uikit의 스크롤이 실행되면 확실히 작동하지 않습니다. 따라서 메뉴 항목이 생성 된 후 uikit.min.js를 소개해야합니다. 코드는 다음과 같습니다.
$ (function () {$ ( '#mysideBar'). createAffix ( 'h3'); // 메뉴를 생성하십시오. $ .getScript ( "uikit.min.js"); // load uikit.min.js synchronously, 스크롤 모니터링이 효과적입니다.});