追加のナビゲーション（Affix）プラグインを使用すると、A <div>をページのどこかに固定できます。プラグインを使用してオンまたはオフを切り替えることもできます。一般的な例はソーシャルアイコンです。彼らはどこかで始まりますが、ページがマークをクリックすると、<div>はどこかにロックされ、ページの残りの部分と一緒にスクロールしません。
プラグインの機能を個別に参照する場合は、affix.jsを参照する必要があります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
使用法
データプロパティを介して、またはJavaScriptを介して、添付のナビゲーション（Affix）プラグインを使用できます。
データ属性を介して：要素に追加のナビゲーション（fix）動作を追加する必要がある場合、聴く必要がある要素にdata-spy = "fix"を追加する必要があります。オフセットを使用して、要素のロックと動きを切り替えるときに定義します。
例
次の例は、データ属性を介して追加のナビゲーション（Affix）プラグインを使用する方法を示しています。
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> bootstrap添付ナビゲーション（affix）プラグイン</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "styleSheet"> <script src = "/jquery src="/bootstrap/js/bootstrap.min.js"></script><style type="text/css">/* Custom Styles */ul.nav-tabs{width: 140px;margin-top: 20px;border-radius: 4px;border: 1px solid #ddd;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067）;} ul.ul.nav-tabs li {margin：0; border-top：1px solid #ddd;} ul.nav-tabs li：first-child {border-top：none;} nav-tabs li a {margin：0; padding：0; padding：8px 16px; border-radius：0;} ul.nav-tabs li. li.cibs A：HOVER {color：#ffff; background：＃0088cc; border：1px solid＃0088cc;} ul.nav-tabs li：first-child a {border-radius：4px 4px 0;} ul.nav-tabs li：last-child a {border-radius：0 0 4px 4px;} ul.px;} / *ピン留め要素のトップ位置を設定 */} </style> </head> <body data-spy = "scroll" data-target = "＃myscrollspy"> <div> <h1> bootstrap affix </h1> </div> <div> <div div = "myscrollspy"> href = "＃section-1">パート1 </a> </li> <li> <a href = "＃section-2">パート2 </a> </li> <li> <a href = "＃section-3">パート3 </a> 5 </a> </li> </ul> </div> <div> <h2 id = "section-1">パート1 </h2> <p> lorem ipsum dolor sit ame Nam Eu Sem Tume、Varius Quam at、Luctus dui。 Mauris Magna Metus、Dapibus Nec Turpis Vel、Semper Malesuada ante。 Vestibulum ID Metus ac nisl bibendum scelerisque non non purus。 Suspendisse varius nibh non aliquet sagittis。 Tincidunt Orci Sit Amet Elementum Vestibulum。 AliquamのArcuのVivamus fermentum。フリンギラのQuisque Aliquam Porta Odio。 Vivamus Nisl Leo、Bibendum EUのBlandit、Tristique Egetリスク。 Integer Aliquet Quam Ut Elit Suscipit、ID Interdum Neque Porttitor。 Integer Faucibus ligula。 Pellentesque eget nisi a mi suscipit tincidunt。 UT Tempus dictum risus。マティスのペレンテスクのヴィベラ・サギッティ・クアム。サスペンディスの可能性。 Aliquam Sit Amet Gravida Nibh、Facilisis Gravida Odio。 Commodo Iaculis Justo ViverraのLacus Blanditの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 Molestie Euismod。 Curabitur et Diam Tristique、Accumsan Nunc Eu、Hendrerit Tellus。 Sagittis LectusのEtiam。 suspendisse ultrices placera accumsan。 Mauris Quis dapibus orci。 Dapibus Velit Blandit Pharetra Tinciduntで。 Quisque nonsapien nec lacus condimentum facilisis ut iaculis enim。 SED Viverra Interdum Bibendum。 donec ac sollicitudin dolor。 RutrumのSed Fringilla vitae Lacus。 phasellus cong vestibulum ligula sed sed結果。 Nam Odio Tortor、Dictum Quis Malesuada at、Pellenentesque Vitae orci。 Vivamus Elementum、Felis Eu Autor Lobortis、Diam Velit Egestas Lacus、Quis fermentum metus ante quis urna。 Facilisis LiberoでのSED。 Cum Sociis Natoque Penatibus et gagnis dis parturient Montes、nascetur ridiculus mus。 Vestibulum Bibendum Blandit Dolor。 NUNC ORCI DOLOR、MOLESTIE 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。 Pellentessque Vitae Metus Ipsum。 Phasellus sed nunc ac sem malesuada condimentum。 Aliquam LectusのEtiam。 Nam Vel Sapien Diam。 donec pharetra id arcu egg blandit。 PorttitorのProin Imperdiet Mattis Augue。 Quisque Tempus Enim Id Lobortis Feugiat。 Suspendisse Tincidunt Riskus Quis Dolor Fringilla Blandit。 Purus Lacinia PorttitorのUt Sed Sapien。 Nullam Iaculis、Felis A Pretium Ornare、Dolor Nisl Semper Tortor、Vel Sagittis Lacus est結果エロス。 SED ID PRETIUM NISL。 Curabitur Dolor Nisl、Laoreet Vitae Aliquam Id、Tincidunt Sit Amet Mauris。 Mauris Pharetra feugiat ante id lacinia。 Etiam Faucibus Mauris ID Theegestas。 Accumsan TinciduntのDuis Luctus Turpis。 Phasellus 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。 Pellentessque Convallis Elit Nisi、ID Vulputate ipsum ullamcorper ut。 CRAS AC Pulvinar Purus、AC ViverraEst。SuspendissePottunali。 Integer Pelletsque Neque et Elementum Tempus。 Ligula ut RhoncusのCurabitur Bibendum。 nullam a justo sed ligula porta semper eu quis enim。 Pellentessque Pelentesque、Facilisis HendreritのMetus、Lectus Velit Ficilisis Leo、Quis volutpat Turpis arcu quis enim。 Nulla Viverra Lorem Elementum Interdum Ultricies。 Suspendisse Accumsan Quam Nec ante Mollis Tempus。 Morbi Vel Accumsan Diamond、Eget Convallis Tellus。 suspendisse potture前庭A iaculis lacus。 Phasellus vitae convallis ligula、nec volutpat telus。 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 three vitae sit amet leo。 Donec Imperdiet Tempus Placerat。 Pellentesque Pulvinar Ultrices Nunc Sed Ultrices。 Morbi Vel Mi Pretium、Fermentum Lacus et、Viverra tellus。 phasellus sodales libero nec dui convallis、sit amet fermentum sapien autotor。 Faucibus orci luctus et ultrices posuere Cubilia curaeのvestiblum ante ipsumプリミス。 sed eu elementum nibh、quis varius libero。 Pellentesque egg nisi a mi suscipit tincidunt。 UT Tempus dictum risus。マティスのペレンテスクのヴィベラ・サギッティ・クアム。サスペンディスの可能性。 Aliquam Sit Amet Gravida Nibh、Facilisis Gravida Odio。 Commodo Iaculis Justo ViverraのLacus Blanditの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 Molestie Euismod。 Curabitur et diam Tristique、Accumsan Nunc Eu、Hendrerit tellus。 nunc ornare erat quis faucibus molestie。 Proin Malesuada結果Commodo。 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 ellus、et ultrices risus felis in orci。 Quisque Vestibulum sem nisl、Vel Congue leo dictum nec。 Velit Sagittis UllamCorper Vel et LectusのCras Eget EST。 HAC Habitasse Platea dictumst。 Etiam Interdum Iaculis Velit、Vel Sollictudin Lorem Feugiat Sit Amet。 Etiam Luctus、Quam Sed Sodales Aliquam、Lorem Libero Hendrerit Urna、Faucibus Rhoncus Massa Nibh at Felis。 Curabitur ac Tempus nulla、ut semper erat。 Vivamus Porta UllamCorper SEM、Ornare Egestas Mauris Facilisis ID。</p> <p> ut Riskus nisl。ノンコングヌラエレディンド、マグナラクトスのフースポートティトルエロス。 Aenean Porttitor Feugiat Dolor Sit Amet Facilisis。 Pellentessque 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、Aliquam Nec Dolor AC、Tempus Convallis Nunc。 Interdum et Malesuada fames ac ante ipsum faucibus。 nulla suscipit convallis iaculis。 Quisque Eget Commodo Ligula。 Praesent Leo dui、Facilisis Quis Eleifend in、Aliquet vitae Nunc。 suspendisse fermentum odio ac massa ultricies pellenentessque。 fusce eu suscipit massa。 nullam ultrices nislリスク、in viverra libero egestas sit amet。 Etiam Porttitor Dolor Non Eros Pulvinar Malesuada。 Vestibulum sit amet est mollis nulla tempus aliquet。 Praesent Luctus Hendrerit arcu non laoreet。 Morbi結果Placerat Magna、Ac Ornare Odio Sagittis Sed。 donec vitae ullamcorper Purus。 vivamus non metus ac Just porta volutpat。 integer nunc nulla、viverra ut sem non、sclerisque heebicula arcu。 fusce bibendum convallis augue sit amet lobortis。 Cras Porta Urna Turpis、Sodales Lobortis Purus Apiscing ID。 Maecenas ullamcorper、Turpis Suscipit Pelentessque Fringilla、Massa Lacus Pulvinar Mi、Nec Dignissim Velit Arcu eget Purus。 Dapibus TellusのNam、Eget Euismod nisl。 UT EGET VENENATIS SAPIEN。 Vivamus Vulputate Varius Mauris、Vel varius nisl facilisis AC。 Nulla Aliquet Just A Nibh Ornare、Eu Congue Neque Rutrum。前庭A iaculis lacus。 Phasellus vitae convallis ligula、nec volutpat telus。 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 three vitae sit amet leo。 Donec Imperdiet Tempus Placerat。 Pellentesque Pulvinar Ultrices Nunc Sed Ultrices。 Morbi Vel Mi Pretium、Fermentum Lacus et、Viverra tellus。 phasellus sodales libero nec dui convallis、sit amet fermentum sapien auctor。 faucibus orci luctus et ultrices posuere cubilia curaeの前庭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。 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。 Praesent et Tempus Odio。整数a quam nunc。 Hab Habitasse Platea dictumst。 Aliquam Porta Nibh Nulla、Et Mattis Turpis Placerat eget。 Pellentesque Dui Diamond、Pelentesque Vel Gravida ID、Accumsan Eu Magna。 sed a semper arcu、ut dignissim leo。 Aliquam結果Ipsum Quis est dictum Ultrices。 Aenean Nibh Velit、Fringilla in Diam ID、Blandit Hendrerit Lacus。 Donec Behicula rutrumは卵のfermentumに伝えます。 Pellentesque ac erat et arcu ornare tincidunt。 Aliquam Erat Volutpat。 Vivamus lobortis urna quis gravida semper。調味料では、est a faucibus luctus、mi dolor cursus mi、id behicula arcu risk a nibh。 Pellentessque Blandit Sapien Lacus、Vel Vehicula Nunc Feugiat Sit Amet。結果は次のとおりです。
JavaScriptを介して：以下に示すように、JavaScriptを介して要素に手動で追加のナビゲーション（Affix）を追加できます。
$（ '＃myaffix'）。
例
次の例は、JavaScriptを介して追加のナビゲーション（Affix）プラグインを使用する方法を示しています。
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> bootstrap添付ナビゲーション（affix）プラグイン</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "styleSheet"> <script src = "/jquery src="/bootstrap/js/bootstrap.min.js"></script><style type="text/css">/* Custom Styles */ul.nav-tabs{width: 140px;margin-top: 20px;border-radius: 4px;border: 1px solid #ddd;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067）;} ul.ul.nav-tabs li {margin：0; border-top：1px solid #ddd;} ul.nav-tabs li：first-child {border-top：none;} nav-tabs li a {margin：0; padding：0; padding：8px 16px; border-radius：0;} ul.nav-tabs li. li.cibs A：HOVER {color：#ffff; background：＃0088cc; border：1px solid＃0088cc;} ul.nav-tabs li：first-child a {border-radius：4px 4px 0;} ul.nav-tabs li：last-child a {border-radius：0 0 4px 4px;} ul.px;} / *ピン留め要素の上位位置を設定 */} </style> <スクリプトタイプ= "text/javascript"> $（document）.read（function（）{$（ "＃mynav"）。 data-target = "＃myscrollspy"> <div> <div> <h1> bootstrap affix </h1> </div> <div> <div div = "> <ul id =" mynav "> <li> <a href ="＃section-1 ">パートI </a> II </a> </li> <li> <a href = "＃section-3">パートI </a> </li> <li> <a href = "＃section-4">パートIV </a> </li> <li> <a href = "＃section-5">パート5 </a> </li> 1 </h2> <p> lorem ipsum dolor sit amet、consceTur adipiscing Elit。 Nam Eu Sem Tume、Varius Quam at、Luctus dui。 Mauris Magna Metus、Dapibus Nec Turpis Vel、Semper Malesuada ante。 vestiblum id metus ac nisl bibendum scelerisque non non purus。 Suspendisse varius nibh non aliquet sagittis。 Tincidunt Orci Sit Amet Elementum Vestibulum。 AliquamのArcuのVivamus fermentum。フリンギラのQuisque Aliquam Porta Odio。 Vivamus Nisl Leo、Bibendum EUのBlandit、Tristique Eget Riskus。 Integer Aliquet Quam Ut Elit Suscipit、ID Interdum Neque Porttitor。 Integer Faucibus ligula。 Pellentesque eget nisi a mi suscipit tincidunt。 UT Tempus dictumリスク。マティスのペレンテスクのヴィベラ・サギッティ・クアム。サスペンディスの可能性。 Aliquam Sit Amet Gravida Nibh、Facilisis Gravida Odio。 Commodo Iaculis Justo ViverraのLacus Blanditの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 Molestie Euismod。 Curabitur et Diam Tristique、Accumsan Nunc Eu、Hendrerit Tellus。 Sagittis LectusのEtiam。 suspendisse ultrices placera accumsan。 Mauris Quis dapibus orci。 Dapibus Velit Blandit Pharetra Tinciduntで。 Quisque nonsapien nec lacus condimentum facilisis ut iaculis enim。 SED Viverra Interdum Bibendum。 donec ac sollicitudin dolor。 RutrumのSed Fringilla vitae Lacus。 phasellus cong vestibulum ligula sed sed結果。 Nam Odio Tortor、Dictum Quis Malesuada at、Pellenentesque Vitae orci。 Vivamus Elementum、Felis Eu Autor Lobortis、Diam Velit Egstas Lacus、Quis fermentum metus ante quis urna。 Facilisis LiberoでのSED。 Cum Sociis Natoque Penatibus et gagnis dis parturient Montes、nascetur ridiculus mus。 Vestibulum Bibendum Blandit Dolor。 NUNC ORCI DOLOR、MOLESTIE 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。 Pellentessque Vitae Metus Ipsum。 Phasellus sed nunc ac sem malesuada condimentum。 Aliquam LectusのEtiam。 Nam Vel Sapien Diam。 donec pharetra id arcu egg blandit。 PorttitorのProin Imperdiet Mattis Augue。 Quisque Tempus Enim Id Lobortis Feugiat。 Suspendisse Tincidunt Riskus Quis Dolor Fringilla Blandit。 Purus Lacinia PorttitorのUt Sed Sapien。 Nullam Iaculis、Felis A Pretium Ornare、Dolor Nisl Semper Tortor、Vel Sagittis Lacus est結果エロス。 SED ID PRETIUM NISL。 Curabitur Dolor Nisl、Laoreet Vitae Aliquam Id、Tincidunt Sit Amet Mauris。 Mauris Pharetra feugiat ante id lacinia。 Etiam Faucibus Mauris Id Turnegest 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。 Pellentessque Convallis Elit Nisi、ID Vulputate ipsum ullamcorper ut。 CRAS AC Pulvinar Purus、AC ViverraEst。SuspendissePottunali。 Integer Pelentesque Neque et Elementum Tempus。 Ligula ut RhoncusのCurabitur Bibendum。 nullam a just sed ligula porta semper eu quis enim。 Pellentessque Pelentesque、Facilisis HendreritのMetus、Lectus Velit Ficilisis Leo、Quis volutpat Turpis arcu quis enim。 Nulla Viverra Lorem Elementum Interdum Ultricies。 Suspendisse Accumsan Quam Nec ante Mollis Tempus。 Morbi Vel Accumsan Diamond、Eget Convallis Tellus。 suspendisse potture前庭A iaculis lacus。 Phasellus vitae convallis ligula、nec volutpat telus。 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 the tum the vitae sit amet leo。 Donec Imperdiet Tempus Placerat。 Pellentesque Pulvinar Ultrices Nunc Sed Ultrices。 Morbi Vel Mi Pretium、Fermentum Lacus et、Viverra tellus。 phasellus sodales libero nec dui convallis、sit amet fermentum sapien autotor。 Faucibus orci luctus et ultrices posuere Cubilia curaeのvestiblum ante ipsumプリミス。 sed eu elementum nibh、quis varius libero。 Pellentesque eget nisi a mi suscipit tincidunt。 UT Tempus dictum risus。マティスのペレンテスクのヴィベラ・サギッティ・クアム。サスペンディスの可能性。 Aliquam Sit Amet Gravida Nibh、Facilisis Gravida Odio。 Commodo Iaculis Justo ViverraのLacus Blanditの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 Molestie Euismod。 Curabitur et diam Tristique、Accumsan Nunc Eu、Hendrerit tellus。 nunc ornare erat quis faucibus molestie。 Proin Malesuada結果Commodo。 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 ultricesリスクフェリスのオルシ。 Quisque Vestibulum sem nisl、Vel Congue leo dictum nec。 Velit Sagittis UllamCorper Vel et LectusのCras Eget EST。 HAC Habitasse Platea dictumst。 Etiam Interdum Iaculis Velit、Vel Sollictudin Lorem Feugiat Sit Amet。 Etiam Luctus、Quam Sed Sodales Aliquam、Lorem Libero Hendrerit Urna、Faucibus Rhoncus Massa Nibh at Felis。 Curabitur ac Tempus nulla、ut semper erat。 Vivamus Porta UllamCorper SEM、Ornare Egestas Mauris Facilisis ID。</p> <p> ut Riskus nisl。ノンコングヌラエレディンド、マグナラクトスのフースポートティトルエロス。 Aenean Porttitor Feugiat Dolor Sit Amet Facilisis。 Pellentessque Venenatis Magna et Risus 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、Aliquam Nec Dolor AC、Tempus Convallis Nunc。 Interdum et Malesuada fames ac ante ipsum faucibus。 nulla suscipit convallis iaculis。 Quisque Eget Commodo Ligula。 Praesent Leo dui、Facilisis Quis Eleifend in、Aliquet vitae Nunc。 suspendisse fermentum odio ac massa ultricies pellenentessque。 Fusce Eu Suscipit Massa。 Nullam Ultrices NISLリスク、Viverra libero eagest amet。 Etiam Porttitor Dolor Non Eros Pulvinar Malesuada。 Vestibulum sit amet est mollis nulla tempus aliquet。 Praesent Luctus Hendrerit arcu non laoreet。 Morbi結果Placerat Magna、Ac Ornare Odio Sagittis Sed。 donec vitae ullamcorper Purus。 vivamus non metus ac justo porta volutpat。 integer nunc nulla、viverra ut sem non、sclerisque heebicula arcu。 fusce bibendum convallis augue sit amet lobortis。 Cras Porta Urna Turpis、Sodales Lobortis Purus Apiscing ID。 Maecenas ullamcorper、Turpis Suscipit Pelentessque Fringilla、Massa Lacus Pulvinar Mi、Nec Dignissim Velit Arcu eget Purus。 Dapibus TellusのNam、Eget Euismod nisl。 UT EGET VENENATIS SAPIEN。 Vivamus Vulputate Varius Mauris、Vel varius nisl facilisis AC。 Nulla Aliquet Just A Nibh Ornare、Eu Congue Neque Rutrum。前庭A iaculis lacus。 Phasellus vitae convallis ligula、nec volutpat telus。 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 three vitae sit amet leo。 Donec Imperdiet Tempus Placerat。 Pellentesque Pulvinar Ultrices Nunc Sed Ultrices。 Morbi Vel Mi Pretium、Fermentum Lacus et、Viverra tellus。 phasellus sodales libero nec dui convallis、sit amet fermentum sapien autotor。 Faucibus orci luctus et ultrices posuere Cubilia curaeのvestiblum ante ipsumプリミス。 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。 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。 Praesent et Tempus Odio。整数a quam nunc。 Hab Habitasse Platea dictumst。 Aliquam Porta Nibh Nulla、Et Mattis Turpis Placerat eget。 Pellentesque Dui Diamond、Pellenentesque Vel Gravida ID、Accumsan Eu Magna。 sed a semper arcu、ut dignissim leo。 Aliquam結果Ipsum Quis est dictum Ultrices。 Aenean Nibh Velit、Fringilla in Diam ID、Blandit Hendrerit Lacus。 Donec Behicula rutrumは卵のfermentumに伝えます。 Pellentesque ac erat et arcu ornare tincidunt。 Aliquam Erat Volutpat。 Vivamus lobortis urna quis gravida semper。調味料では、est a faucibus luctus、mi dolor cursus mi、id behicula arcu risk a nibh。 Pellentessque Blandit Sapien Lacus、Vel Vehicula Nunc Feugiat Sit Amet。</p> </div> </div> </body> </html>結果は次のとおりです。
CSSによる位置決め
上記の両方の方法で、Affixプラグインを使用するには、CSSを介してコンテンツを見つける必要があります。追加のナビゲーション（Affix）プラグインは、3つのクラスの間に切り替えられ、それぞれが特定の状態を示します。以下の手順に従って、これら3つの状態に独自のCSSを設定してください（このプラグインに依存していません）。
最初に、プラグインは.Affix-Topを追加して、その最上位の位置に要素を示します。現時点では、CSSポジショニングは必要ありません。
追加のナビゲーション（Affix）が追加される要素をスクロールする場合、実際の追加のナビゲーション（Affix）をトリガーする必要があります。この時点で、.Affixは.Affix-Topを置き換え、位置を設定します。 （BootstrapのCSSコードによって提供）。
ボトムオフセットが定義されている場合、スクロールがその位置に到達したら、.Affixを.Affix-bottomに置き換えます。オフセットはオプションであるため、オフセットが設定されている場合、適切なCSSを同時に設定する必要があります。この場合、位置を追加します。絶対;必要に応じて。
オプション
データプロパティまたはJavaScriptを介して渡されるいくつかのオプションがあります。次の表には、これらのオプションがリストされています。
上記は、編集者が紹介したブートストラップ追加ナビゲーション（Affix）プラグインの例の詳細な説明です。私はそれが誰にでも役立つことを願っています！