추가 내비게이션 (affix) 플러그인을 사용하면 <div>가 페이지 어딘가에 고정 할 수 있습니다. 플러그인을 사용하여 켜거나 끄는 것 사이를 전환 할 수도 있습니다. 일반적인 예는 소셜 아이콘입니다. 그들은 어딘가에서 시작되지만 페이지가 마크를 클릭하면 <div>가 어딘가에 고정되어 나머지 페이지와 함께 스크롤하지 않습니다.
플러그인의 기능을 별도로 참조하려면 affix.js를 참조해야합니다. 또는 Bootstrap 플러그인 개요 장에서 언급했듯이 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조하십시오.
용법
데이터 속성 또는 JavaScript를 통해 첨부 된 Navigation (affix) 플러그인을 사용할 수 있습니다.
데이터 속성을 통해 : 요소에 추가 내비게이션 (affix) 동작을 추가 해야하는 경우, 듣는 요소에 Data-Spy = "affix"만 추가하면됩니다. 오프셋을 사용하여 요소의 잠금 및 움직임을 전환 할 때 정의하십시오.
예
다음 예제는 데이터 속성을 통해 추가 내비게이션 (affix) 플러그인을 사용하는 방법을 보여줍니다.
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 부트 스트랩 첨부 된 탐색 (affix) 플러그인 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <style type = "text/css">/ * custom styles */ul.nav-tabs {140px; 1px solid #ddd; box-shadow : 0 1px 4px rgba (0, 0, 0, 0.067);} ul.nav-tabs li {margin : 0; border-top : 1px solid #ddd;} ul.nav-tabs li : First-Child {border-top : none; 16px; Border-Radius : 0;} ul.nav-tabs li.active a, ul.nav-tabs li.active a : hover {컬러 : #ffff; 배경 : #0088cc; 경계 : 1px solid #0088cc;} ul.nav-tabs li : 국경 a {bord-radius : 4px 4px 0;}}. A {Border-Radius : 0 4px 4px;} ul.nav-tabs.affix {top : 30px; / * 고정 요소의 최상위 위치를 설정 */} </style> </head> <Body Data-Spy = "Scroll"Data-Target = "#MyScrollspy"> <div> <div> <h1> bootstrap affix </h1> </div> <div id = "myScrollspy"> <li <li <ultop = "125"> href = "#section-1"> Part 1 </a> </a> </li> <li> <a href = "#section-2"> Part 2 </a> <li> <a href = "#section-3"> Part 3 </a> <li> <a href = "#섹션 -4"> Part 4 </a> <li> <a href = "##part-part 5 </a> </li> </ul> </div> <div> <h2 id = "Section-1"> Part 1 </h2> <p> lorem ipsum dolor sit amet, censertur apiscing elit. Nam Eu Sem Temp, Varius Quam at, Luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non purus. SUSTENDISSE VARIUS NIBH 비 분취시기 티스. Tincidunt에서 Orci Sit Amet Elementum Vestibulum. Arcu의 Vivamus fermentum. Fringilla의 Quisque Aliquam Porta Odio. Vivamus Nisl Leo, Bibendum EU의 Blandit, Tristique Eget Risk. 정수 분산 퀴 퀴 ut ut elit suscipit, id interdum neque porttitor. 정수 모시치스 Ligula. </p> <p> vestibulum quis quam ut magna residat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. ut tempus dictum risus. Mattis의 Pellentesque Viverra Sagittis Quam. SportIsse 잠재력. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Lacus Blandit, Commodo Iaculis Justo Viverra에서 Phasellus Autor Velit. Etiam vitae est arcu. Mauris Vel Congue Dolor. aliquam eget mi mi. Fusce Quam Tortor, Commodo Acduis duis Quis, Bibendum Viverra erat. Maecenas Mattis Lectus enim, Quis tincidunt dui mulestie euismod. Curabitur et Diam Tristique, Accumsan Nunc EU, Hendrerit Tellus. Sagittis Lectus의 Etiam. SPERNISSE ULTRICES PLACERA ACCUMSAN. Mauris Quis dapibus orci. Dapibus velit Blandit Pharetra Tincidunt에서. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed Viverra Interdum Bibendum. Donec ac Sollicitudin dolor. Rutrum에서 Fringilla vitae lacus. Phasellus congue vestibulum ligula sed 결과. </p> <p> vestibulum consectetur scelerisque lacus, fermentum lorem convallis sed. Nam Odio Tortor, Dictum Quis malesuada at, pellenentesque vitae orci. vivamus elementum, felis eu autor lobortis, diam velit egestas lacus, quis permentum metus ante quis urna. Facilisis Libero에서 SED. Cum Sociis natoque penatibus et magnis dis parturient montes, nascetur rowulus mus. vestibulum bibendum blandit dolor. Nunc Orci Dolor, Mulestie Nec Nibh In, Hendrerit Tincidunt Ante. Vivamus Sem Augue, Hendrerit non Sapien In, Mollis Ornare Augue. Sed Diamond Libero, Sodales Eget Sapien Vel, Porttitor Bibendum Enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada jordimentum. Aliquam Lectus의 Etiam. Nam Vel Sapien Diam. Donec Pharetra id Arcu Egg Blandit. Porttitor의 Proin Inmerdiet Mattis Augue. Quisque Tempus enim id lobortis feugiat. Sportensse Tincidunt Riskus Quis Dolor Fringilla Blandit. Purus lacinia porttitor에서 sed sapien. NULLAM IACULIS, FELIS A PREITIM ORNARE, DOLOR NISL SEMPER TORTOR, VEL SAGITTIS LACUS EST 결과 EROS. sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris. </p> <p> phasellus vitae suscipit justo. Mauris Pharetra Feugiat ante id lacinia. Etiam faucibus mauris id temp egestas. Accumsan Tincidunt의 Duis luctus turpis. Phasellus Riskus Risk, Volutpat Vel Tellus AC, Tincidunt Fringilla Massa. Etiam hendrerit dolor eget ante Rutrum adipiscing. Cras Interdum ipsum Mattis, Tempus Mauris Vel, Semper Ipsum. duis sed dolor ut enim lobortis pelletesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras AC Pulvinar Purus, AC Viverra est. SUSTENDISSE PORTIONS. 정수 pelletsque neque et emectum tempus. ligula ut rhoncus의 curabitur bibendum. Nullam a Justo Sed Ligula Porta Semper EU Quis Enim. Pellentesque Pelentesque, Facilisis hendrerit의 메 투스, Lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla Viverra Lorem Elementum Interdum Ultricies. SPERNDISSE ACCUMSAN QUAM NEC ANTE MOLLIS TEMPUS. Morbi vel accumsan 다이아몬드, eget convallis tellus. SPERNDISSE PORTIOLI. vestibulum aiaculis lacus. Phasellus vitae convallis ligula, NEC Volutpat Tellus. Vivamus sclerisque mollis nisl, nec vehicula elit egestas a. sed luctus metus id mi gravida, faucilibus convallis neque pretium. Maecenas quis sapien ut leo fringilla 시간 vitae sit amet leo. Donec inmerdiet Tempus Placerat. Pellentesque Pulvinar Ultrices Nunc Sed Ultrices. Morbi Vel Mi Pretium, Fermentum lacus et, Viverra Tellus. Phasellus Sodales Libero Nec dui Convallis, 앉아 Amet Fermentum Sapien Autotor. 파 ucicus orci luctus et ultrices posuere cubilia curae의 Vestiblum ante ipsum primis; sed eu elementum nibh, quis varius libero. Pellentesque Egg Nisi Mi Suscipit Tincidunt. ut tempus dictum risus. Mattis의 Pellentesque Viverra Sagittis Quam. SportIsse 잠재력. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Lacus Blandit, Commodo Iaculis Justo Viverra에서 Phasellus Autor Velit. Etiam vitae est arcu. Mauris Vel Congue Dolor. aliquam eget mi mi. Fusce Quam Tortor, Commodo ac dui Quis, Bibendum Viverra erat. Maecenas Mattis Lectus enim, Quis tincidunt dui mulestie euismod. Curabitur et Diam Tristique, Accumsan nunc eu, Hendrerit Tellus. Nunc Ornare erat quis faucibus 성식. Proin Malesuada 결과 코모도. Mauris Iaculis, eros ut dapibus luctus, massa enim elementum purus, sit amet tristique purus purus nec felis. Morbi Vestibulum Sapien Eget Porta Pulvinar. Quam Diam에서 Nam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et letrices risus felis. Quisque Vestibulum sem nisl, vel congue leo dictum nec. velit sagittis ullamcorper vel et lectus에서 cras eget est. HAC 습관에서 고원 Dictumst. Etiam Interdum Iaculis Velit, Vel Sollicitudin Lorem Feugiat Sit Amet. Etiam Luctus, Quam Sed Sodales Aliquam, Lorem Libero Hendrerit Urna, Felis의 Faucibus rhoncus massa nibh. Curabitur AC Tempus Nulla, ut Semper erat. vivamus porta ullamcorper sem, ornare egestas mauris facilisis id. </p> <p> ut ut rillus nisl. Magna luctus의 Fusce Porttitor Eros, nongue nulla eleifend. Aenean Porttitor Feugiat Dolor Sit Amet Facilisis. Pellentesque Venenatis Magna et Riskus Commodo, Commodo Turpis Gravida. Nam Mollis Massa Dapibus Urna Aliquet, Quis Iaculis elit Sodales. sed eget ornare orci, eu malesuada Justto. Nunc Lacus Augue, Dictum Quis dui id, Lacinia congue Quam. NULLA SEM SEM, ALIQUAM NEC DOLOR AC, TEMPUS CONVALLIS NUNC. interdum et malesuada fames ac ante ipsum primis. NULLA SUSCIPIT CONVALLIS IACULIS. Quisque Eget Commodo Ligula. pramesent leo dui, facilisis quis eleifend in, aliquet vitae nunc. SPERTENDISSE FERMENTUM ODIO AC MASSA ULTRICIES PELLENENTESQUE. FUSCE EU SUSCIPIT MASA. Viverra Libero egestas Sit Amet에서 Nullam Ultrices Nisl Risk. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum Sit Amet est Mollis Nulla Tempus Aliquet. pramesent luctus hendrerit arcu non laoreet. Morbi 결과 Placerat Magna, AC Ornare Odio Sagittis Sed. Donec vitae ullamcorper purus. Vivamus non metus ac Just Porta volutpat. </p> <p> vivamus mattis accumsan erat, vel convallis risk pretium nec. 정수 nunc nulla, viverra ut sem non, sclerisque vehicula arcu. Fusce Bibendum convallis augue sit amet lobortis. cras porta urna turpis, 소셜 로포티스 푸러스 apiscing id. Maecenas Ullamcorper, Turpis Suscipit Pelentesque Fringilla, Massa Lacus Pulvinar Mi, Nec Dignissim Velit Arcu Eget Purus. Dapibus Tellus의 Nam, Eget euismod nisl. ut eget venenatis sapien. Vivamus는 Varius Mauris, Vel varius nisl facilisis ac. Nulla 분취제는 단지 nibh ornare, eu conge neque rutrum. </p> <p> sustendisse a orci fabilisis, dignissim tortor vitae, Ultrices mi. vestibulum aiaculis lacus. Phasellus vitae convallis ligula, NEC Volutpat Tellus. Vivamus sclerisque mollis nisl, nec vehicula elit egestas a. sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla 시간 vitae sit amet leo. Donec inmerdiet Tempus Placerat. Pellentesque Pulvinar Ultrices Nunc Sed Ultrices. Morbi Vel Mi Pretium, Fermentum lacus et, Viverra Tellus. Phasellus Sodales Libero Nec dui convallis, 앉아 Amet Fermentum Sapien auctor. Faucibus orci luctus et ultrices posuere cubilia curae의 vestibulum ante ipsum primis; sed eu elementum nibh, quis varius libero. </p> <p> morbi sed fermentum ipsum. Morbi a orci vulputate tortor ornare blandit a quis orci. Donec Aliquam Sodales Gravida. ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, 결과적으로 lorem sit amet, pulvinar tellus. Tincidunt에서 Vel Leo Eget Pulvinar. curabitur a eros non lacus malesuada aliquam. pramesent et tempus odio. 정수 quam nunc. Hab Habitasse Platea Dictumst에서. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui 다이아몬드, Pelentesque Vel Gravida ID, Accumsan EU Magna. sed a semper arcu, ut dignissim leo. </p> <p> sed vitae lobortis diam, id mulestie magna. Aliquam 결과 ipsum quis est dictum Ultrices. Aenean Nibh Velit, DIAM ID의 Fringilla, Blandit Hendrerit Lacus. Donec Vehicula Rutrum은 Egg Fermentum을 알려줍니다. Pellentesque ac erat et arcu ornare tincidunt. aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. 조미료에서, est aucicus luctus, mi dolor cursus mi, id vehicula arcu a nibh. Pellentesque Blandit Sapien Lacus, Vel Vehicula Nunc Feugiat Sit Amet.결과는 다음과 같습니다.
JavaScript를 통해 : 아래와 같이 JavaScript를 통해 요소에 추가 내비게이션 (affix)을 수동으로 추가 할 수 있습니다.
$ ( '#myaffix'). affix ({오프셋 : {상단 : 100, 하단 : function () {return (this.bottom = $ ( '. bs-footer'). OUTERHEIGHT (true)}}}))예
다음 예제는 JavaScript를 통한 추가 내비게이션 (affix) 플러그인을 사용하는 방법을 보여줍니다.
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 부트 스트랩 첨부 된 탐색 (affix) 플러그인 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <style type = "text/css">/ * custom styles */ul.nav-tabs {140px; 1px solid #ddd; box-shadow : 0 1px 4px rgba (0, 0, 0, 0.067);} ul.nav-tabs li {margin : 0; border-top : 1px solid #ddd;} ul.nav-tabs li : First-Child {border-top : none; 16px; Border-Radius : 0;} ul.nav-tabs li.active a, ul.nav-tabs li.active a : hover {컬러 : #ffff; 배경 : #0088cc; 경계 : 1px solid #0088cc;} ul.nav-tabs li : 국경 a {bord-radius : 4px 4px 0;}}. A {Border-Radius : 0 4px 4px;} ul.nav-tabs.affix {top : 30px; / * 고정 요소의 상단 위치를 설정 */} </style> <script type = "text/javaScript"> $ (document) .Ready (function () {$ ( "#mynav"). affix ({orpset : {orpset : {script : 125}});}); data-target = "#myscrollspy"> <div> <div> <h1> bootstrap affix </h1> </div> <div> <div id = "myscrollspy"> <ul id = "mynav"> <li> <a href = "#section-1"> part i </a> <li> <a href = "####part ii </a> </li> <li> <a href = "#href ="#섹션 -3 "> part i </a> </a> </li> <li> a href ="#section-4 "> part iv </a> </li> <li> <a href ="#섹션 -5 "> Part 5 </a> </li> <div> <h2 id ="> part-12 1 </h2> <p> Lorem ipsum dolor sit amet, consteretur adipiscing elit. Nam Eu Sem Temp, Varius Quam at, Luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestiblum id metus ac nisl bibendum scelerisque 비 non purus. SUSTENDISSE VARIUS NIBH 비 분취시기 티스. Tincidunt에서 Orci Sit Amet Elementum Vestibulum. Arcu의 Vivamus fermentum. Fringilla의 Quisque Aliquam Porta Odio. Vivamus Nisl Leo, Bibendum EU의 Blandit, Tristique Eget Riskus. 정수 분산 퀴 퀴 ut ut elit suscipit, id interdum neque porttitor. 정수 모시치스 Ligula. </p> <p> vestibulum quis quam ut magna residat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. UT 템포 덕스 위험. Mattis의 Pellentesque Viverra Sagittis Quam. SportIsse 잠재력. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Lacus Blandit, Commodo Iaculis Justo Viverra에서 Phasellus Autor Velit. Etiam vitae est arcu. Mauris Vel Congue Dolor. aliquam eget mi mi. Fusce Quam Tortor, Commodo ac dui Quis, Bibendum Viverra erat. Maecenas Mattis Lectus enim, Quis tincidunt dui mulestie euismod. Curabitur et Diam Tristique, Accumsan Nunc EU, Hendrerit Tellus. Sagittis Lectus의 Etiam. SPERNISSE ULTRICES PLACERA ACCUMSAN. Mauris Quis dapibus orci. Dapibus velit Blandit Pharetra Tincidunt에서. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed Viverra Interdum Bibendum. Donec ac Sollicitudin dolor. Rutrum에서 Fringilla vitae lacus. Phasellus congue vestibulum ligula sed 결과. </p> <p> vestibulum scelerisque lacus, ac fermentum lorem convallis sed. Nam Odio Tortor, Dictum Quis malesuada at, pellenentesque vitae orci. Vivamus elementum, felis eu autor lobortis, diam velit egstas lacus, quis permentum metus ante quis urna. Facilisis Libero에서 SED. Cum Sociis natoque penatibus et magnis dis parturient montes, nascetur rowulus mus. vestibulum bibendum blandit dolor. Nunc Orci Dolor, Mulestie Nec Nibh In, Hendrerit Tincidunt Ante. Vivamus Sem Augue, Hendrerit non Sapien In, Mollis Ornare Augue. Sed Diamond Libero, Sodales Eget Sapien Vel, Porttitor Bibendum Enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada jordimentum. Aliquam Lectus의 Etiam. Nam Vel Sapien Diam. Donec Pharetra id Arcu Egg Blandit. Porttitor의 Proin Inmerdiet Mattis Augue. Quisque Tempus enim id lobortis feugiat. Sportensse Tincidunt Riskus Quis Dolor Fringilla Blandit. Purus lacinia porttitor에서 sed sapien. NULLAM IACULIS, FELIS A PREITIM ORNARE, DOLOR NISL SEMPER TORTOR, VEL SAGITTIS LACUS EST 결과 EROS. sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris. </p> <p> phasellus vitae suscipit Justto. Mauris Pharetra Feugiat ante id lacinia. Etiam faucibus mauris id Temle 큰 egstas. Accumsan Tincidunt의 Duis luctus turpis. Phasellus Riskus Riskus, Volutpat Vel Tellus AC, Tincidunt Fringilla Massa. Etiam hendrerit dolor eget ante Rutrum adipiscing. Cras Interdum ipsum Mattis, Tempus Mauris Vel, Semper Ipsum. duis sed dolor ut enim lobortis pelletesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras AC Pulvinar Purus, AC Viverra est. SUSTENDISSE PORTIONS. 정수 pelentesque neque et emectum tempus. ligula ut rhoncus의 curabitur bibendum. NULLAM 방금 sed ligula porta semper eu quis enim. Pellentesque Pelentesque, Facilisis hendrerit의 메 투스, Lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla Viverra Lorem Elementum Interdum Ultricies. SPERNDISSE ACCUMSAN QUAM NEC ANTE MOLLIS TEMPUS. Morbi vel accumsan 다이아몬드, eget convallis tellus. SPERNDISSE PORTIOLI. vestibulum aiaculis lacus. Phasellus vitae convallis ligula, NEC Volutpat Tellus. Vivamus sclerisque mollis nisl, nec vehicula elit egestas a. sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecinas quis sapien ut leo fringilla tempa vitae sit amet leo. Donec inmerdiet Tempus Placerat. Pellentesque Pulvinar Ultrices Nunc Sed Ultrices. Morbi Vel Mi Pretium, Fermentum lacus et, Viverra Tellus. Phasellus Sodales Libero Nec dui Convallis, 앉아 Amet Fermentum Sapien Autotor. 파 ucicus orci luctus et ultrices posuere cubilia curae의 Vestiblum ante ipsum primis; sed eu elementum nibh, quis varius libero. Pellentesque eget nisi a mi suscipit tincidunt. ut tempus dictum risus. Mattis의 Pellentesque Viverra Sagittis Quam. SportIsse 잠재력. Aliquam Sit Amet Gravida Nibh, Facilisis Gravida Odio. Lacus Blandit, Commodo Iaculis Justo Viverra에서 Phasellus Autor Velit. Etiam vitae est arcu. Mauris Vel Congue Dolor. aliquam eget mi mi. Fusce Quam Tortor, Commodo ac duis Quis, Bibendum Viverra erat. Maecenas Mattis Lectus enim, Quis tincidunt dui mulestie euismod. Curabitur et Diam Tristique, Accumsan nunc eu, Hendrerit Tellus. Nunc Ornare erat quis faucibus 성식. Proin Malesuada 결과 코모도. Mauris Iaculis, eros ut dapibus luctus, massa enim elementum purus, sit amet tristique purus purus nec felis. Morbi Vestibulum Sapien Eget Porta Pulvinar. Quam Diam에서 Nam. Proin Rhoncus, Felis Elementum Accumsan Dictum, Felis nisi Vestibulum Tellus, et allis risk risk elis on orci. Quisque Vestibulum sem nisl, vel congue leo dictum nec. velit sagittis ullamcorper vel et lectus에서 cras eget est. HAC 습관에서 고원 Dictumst. Etiam Interdum Iaculis Velit, Vel Sollicitudin Lorem Feugiat Sit Amet. Etiam Luctus, Quam Sed Sodales Aliquam, Lorem Libero Hendrerit Urna, Felis의 Faucibus rhoncus massa nibh. Curabitur AC Tempus Nulla, ut Semper erat. vivamus porta ullamcorper sem, ornare egestas mauris facilisis id. </p> <p> ut ut rillus nisl. Magna luctus의 Fusce Porttitor Eros, nongue nulla eleifend. Aenean Porttitor Feugiat Dolor Sit Amet Facilisis. Pellentesque Venenatis Magna et Risus Commodo, 코모도 Turpis Gravida. Nam Mollis Massa Dapibus Urna Aliquet, Quis Iaculis elit Sodales. sed eget ornare orci, eu malesuada Justto. Nunc Lacus Augue, Dictum Quis dui id, Lacinia congue Quam. NULLA SEM SEM, ALIQUAM NEC DOLOR AC, TEMPUS CONVALLIS NUNC. interdum et malesuada fames ac ante ipsum primis. NULLA SUSCIPIT CONVALLIS IACULIS. Quisque Eget Commodo Ligula. pramesent leo dui, facilisis quis eleifend in, aliquet vitae nunc. SPERTENDISSE FERMENTUM ODIO AC MASSA ULTRICIES PELLENENTESQUE. FUSCE EU SUSCIPIT MASSA. Viverra Libero Ergest Amet에서 Nullam Ultrices NISL 위험. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum Sit Amet est Mollis Nulla Tempus Aliquet. pramesent luctus hendrerit arcu non laoreet. Morbi 결과 Placerat Magna, AC Ornare Odio Sagittis Sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat. 정수 nunc nulla, viverra ut sem non, sclerisque vehicula arcu. Fusce Bibendum convallis augue sit amet lobortis. cras porta urna turpis, 소셜 로포티스 푸러스 apiscing id. Maecenas Ullamcorper, Turpis Suscipit Pelentesque Fringilla, Massa Lacus Pulvinar Mi, Nec Dignissim Velit Arcu Eget Purus. Dapibus Tellus의 Nam, Eget euismod nisl. ut eget venenatis sapien. Vivamus는 Varius Mauris, Vel varius nisl facilisis ac. Nulla 분취제는 단지 nibh ornare, eu conge neque rutrum. </p> <p> sustendisse a orci fabilisis, dignissim tortor vitae, Ultrices mi. vestibulum aiaculis lacus. Phasellus vitae convallis ligula, NEC Volutpat Tellus. Vivamus sclerisque mollis nisl, nec vehicula elit egestas a. sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla 시간 vitae sit amet leo. Donec inmerdiet Tempus Placerat. Pellentesque Pulvinar Ultrices Nunc Sed Ultrices. Morbi Vel Mi Pretium, Fermentum lacus et, Viverra Tellus. Phasellus Sodales Libero Nec dui Convallis, 앉아 Amet Fermentum Sapien Autotor. 파 ucicus orci luctus et ultrices posuere cubilia curae의 Vestiblum ante ipsum primis; sed eu elementum nibh, quis varius libero. </p> <p> morbi sed fermentum ipsum. Morbi a orci vulputate tortor ornare blandit a quis orci. Donec Aliquam Sodales Gravida. ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, 결과적으로 lorem sit amet, pulvinar tellus. Tincidunt에서 Vel Leo Eget Pulvinar. curabitur a eros non lacus malesuada aliquam. pramesent et tempus odio. 정수 quam nunc. Hab Habitasse Platea Dictumst에서. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui 다이아몬드, Pellenentesque Vel Gravida ID, Accumsan EU Magna. sed a semper arcu, ut dignissim leo. </p> <p> sed vitae lobortis diam, id mulestie magna. Aliquam 결과 ipsum quis est dictum Ultrices. Aenean Nibh Velit, DIAM ID의 Fringilla, Blandit Hendrerit Lacus. Donec Vehicula Rutrum은 Egg Fermentum을 알려줍니다. Pellentesque ac erat et arcu ornare tincidunt. aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. 조미료에서, est aucicus luctus, mi dolor cursus mi, id vehicula arcu a nibh. Pellentesque Blandit Sapien Lacus, Vel Vehicula nunc feugiat sit amet. </p> </div> </div> </body> </html>결과는 다음과 같습니다.
CSS를 통한 포지셔닝
위의 위의 두 가지 방법에서는 affix 플러그인을 사용하는 방법에서 CSS를 통해 컨텐츠를 찾아야합니다. 추가 내비게이션 (affix) 플러그인 스위치는 세 가지 클래스 사이에서 스위치이며 각 클래스는 특정 상태와 같은 .affix, .affix-top 및 .affix-bottom을 나타냅니다. 아래 단계를 따라이 세 상태에 대한 자신의 CSS를 설정하십시오 (이 플러그인에 의존하지 않음).
처음에 플러그인은 .affix-top을 추가하여 요소를 최상위 위치에 표시합니다. 현재 CSS 포지셔닝이 필요하지 않습니다.
추가 내비게이션 (affix)이 추가 된 요소를 스크롤하면 실제 추가 내비게이션 (affix)이 트리거되어야합니다. 현재 .affix는 .affix-top을 대체하고 위치를 설정합니다. (Bootstrap의 CSS 코드에서 제공).
하단 오프셋이 정의되면 스크롤이 해당 위치에 도달하면 .affix를 .affix-bottom으로 바꾸십시오. 오프셋이 선택 사항이므로 오프셋이 설정되면 적절한 CSS를 동시에 설정해야합니다. 이 경우 위치를 추가하십시오 : 절대; 필요한 경우.
옵션
데이터 속성 또는 JavaScript를 통해 전달되는 몇 가지 옵션이 있습니다. 다음 표는 다음 옵션을 나열합니다.
위의 내용은 부트 스트랩 추가 내비게이션 (affix) 플러그인 예제에 대한 자세한 설명입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!