추가 내비게이션 (affix) 플러그인을 사용하면 <div>가 페이지 어딘가에 고정 할 수 있습니다. 플러그인을 사용하여 켜거나 끄는 것 사이를 전환 할 수도 있습니다. 일반적인 예는 소셜 아이콘입니다. 그들은 어딘가에서 시작되지만 페이지가 마크를 클릭하면 <div>가 어딘가에 고정되어 나머지 페이지와 함께 스크롤하지 않습니다.
플러그인의 기능을 별도로 참조하려면 affix.js를 참조해야합니다.
1. 사용법
추가 내비게이션 (affix) 플러그인은 데이터 속성 또는 JavaScript를 통해 사용할 수 있습니다.
1. 데이터 속성을 통해 : 요소에 추가 내비게이션 (affix) 동작을 추가 해야하는 경우, Data-Spy = "affix"를 듣는 요소에만 추가하면됩니다. 오프셋을 사용하여 요소의 잠금 및 움직임을 전환 할 때 정의하십시오.
2. JavaScript를 통해 : JavaScript (affix)를 통해 요소에 추가 내비게이션을 수동으로 추가 할 수 있습니다.
2. CSS를 통한 포지셔닝
위의 위의 두 가지 방법에서는 affix 플러그인을 사용하는 방법에서 CSS를 통해 컨텐츠를 찾아야합니다. 추가 내비게이션 (affix) 플러그인 스위치는 세 가지 클래스 사이에서 스위치이며 각 클래스는 특정 상태와 같은 .affix, .affix-top 및 .affix-bottom을 나타냅니다. 아래 단계를 따라이 세 상태에 대한 자신의 CSS를 설정하십시오 (이 플러그인에 의존하지 않음).
1. 처음에 플러그인은 .affix-top을 추가하여 요소를 최상위 위치에 표시합니다. 현재 CSS 포지셔닝이 필요하지 않습니다.
2. 추가 내비게이션 (affix)이 추가 된 요소를 스크롤 할 때 실제 추가 내비게이션 (affix)을 트리거해야합니다. 현재 .affix는 .affix-top을 대체하고 위치를 설정합니다. (Bootstrap의 CSS 코드에서 제공).
3. 하부 오프셋이 정의되면 스크롤 이이 위치에 도달하면 .affix를 .affix-bottom으로 바꾸십시오. 오프셋이 선택 사항이므로 오프셋이 설정되면 적절한 CSS를 동시에 설정해야합니다. 이 경우 위치를 추가하십시오 : 절대; 필요한 경우.
3. 옵션
데이터 속성 또는 JavaScript를 통해 전달되는 몇 가지 옵션이 있습니다. 다음 표는 다음 옵션을 나열합니다.
IV. 예
추가 내비게이션은 앵커 기능을 실현하기 위해 화면 어딘가에 붙여 넣는 것을 의미합니다.
1. 기본 예
<Body Data-Spy = "Scroll"Data-Target = "#myscrollspy"> <div> <div style = "height : 150px"> <h1> bootstrap affix </h1> </div> <div> <div id = "myscrollspy"> <ul data-spy = "affix"dataformset-top = "150"> <li> <a href =#part-1 "> </li> <li> <a href = "#섹션 -2"> Part 2 </a> </li> <li> <a href = "#섹션 -3"> Part 3 </a> </li> <li> <a href = "#섹션 -4"> Part 4 </a> </li> <li> <a href = "#divy> </li> </li> </li> </li> <#divy> <h2 id = "섹션 -1"> Part 1 </h2> <p> ... </p> <h2 id = "섹션 -2"> Part 2 </h2> <p> ... </p> <h2 id = "섹션 -3"> Part 3 </h2> <p> ... 4 </h2> <p> ... </p> </div> </div> </div>
2. 내비게이션의 CSS 부분
ul.nav-pills {width : 200px;} ul.nav-pills.affix {top : 30px;} // javaScript data-spy = "affix"data-offerset-top = "125"$ ( '#myaffix').기본적으로 상단을 사용하며 물론 기본적으로 하단을 사용할 수도 있습니다. 이 포지셔닝 방법은 CSS를 통해 직접 배치됩니다.
// thantul.nav-tabs.affix-bottom {하단 : 30px;} // 하단으로 설정 ( '#myaffix').접미사에는 다음과 같이 여러 이벤트가 포함됩니다.
// 기타 유사한 $ ( '#myaffix'). on ( 'affixed-top.bs.affix', function () {alert ( 'trigger!');});여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.