บูตนำทางเพิ่มเติม (ติด) วิดเจ็ต
นำทางเพิ่มเติม (ติด) plug-in ที่ช่วยให้ <div> คงที่ตำแหน่งใดตำแหน่งหนึ่งบนหน้าเว็บ นอกจากนี้คุณยังสามารถเปิดหรือปิดใช้สลับไปมาระหว่างปลั๊กอินใน ร่วมเป็นตัวอย่างเป็นไอคอนทางสังคม พวกเขาจะเริ่มต้นที่ตำแหน่งใดตำแหน่งหนึ่ง แต่เมื่อคลิกที่หน้าแท็กที่ <div> จะถูกล็อคอยู่ในตำแหน่งที่ไม่ได้กับส่วนที่เหลือของการเลื่อนหน้า
หากคุณต้องการที่จะอ้างถึงบุคคล Plug-in คุณสมบัติที่คุณจะต้องอ้างอิงaffix.jsหรือเป็น เงินทุนปลั๊กอินภาพรวม บทที่กล่าวถึงคุณสามารถดูbootstrap.jsหรือเวอร์ชันบีบอัดbootstrap.min.js
การใช้
คุณสามารถแสดงที่มาของข้อมูลหรือโดยใช้ JavaScript เพิ่มเติมเพื่อนำทาง (ติด) ปลั๊กอิน
- ผ่านคุณลักษณะข้อมูล: เพื่อเพิ่มองค์ประกอบเพิ่มเติมเพื่อนำทางพฤติกรรม (ติด) จะต้องเพิ่มองค์ประกอบที่คุณต้องการตรวจสอบข้อมูลสายลับ = "ติด"สามารถ ใช้ Offset การกำหนดองค์ประกอบการล็อคและเมื่อสลับมือถือ
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของระบบนำทาง (ติด) วิดเจ็ตเพิ่มเติมโดยข้อมูลแอตทริบิวต์การใช้งาน:
ตัวอย่าง
<! DOCTYPE html> <html> <head> <Meta charset = "UTF-8"> <title> บูตนำทางเพิ่มเติม (ติด) วิดเจ็ต </ title> <link rel = "สไตล์ชีต" href = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src = "http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <script src = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"> </ script> <style>/ * ลักษณะที่กำหนดเอง * / UL .nav แท็บ { ความกว้าง: 140 พิกเซล ; margin-ด้านบน: 20 px ; border-radius: 4 px ; ชายแดน: 1 px ของแข็ง #ddd ; กล่องเงา: 0 1 px 4 px RGBA (0, 0, 0, 0.067) ;} UL .nav แท็บ li { margin: 0 ; ชายแดนด้านบน: 1 px ของแข็ง #ddd ;} UL .nav แท็บ Li: ครั้งแรกที่เด็ก { ขอบด้านบน: ไม่มีเลย ;} UL .nav แท็บ ลี้ ก { margin: 0 ; แผ่นรอง: 8 px 16 px ; border-radius: 0 ;} UL .nav แท็บ Li .active ที่ UL .nav แท็บ Li .active A: โฉบ { สี: # fff ; พื้นหลัง: # 0088cc ; ชายแดน: 1 px ของแข็ง # 0088cc ;} UL .nav แท็บ Li: ครั้งแรกที่เด็ก ก { border-radius: 4 px 4 px 0 0 ;} UL .nav แท็บ Li: สุดท้ายเด็ก ก { border-radius: 0 0 4 px 4 px ;} UL .affix .nav แท็บ { ด้านบน: 30 px ; / * กำหนดตำแหน่งบนสุดของ องค์ประกอบตรึง * / }</ style> </ head> <body ข้อมูลสายลับ = "เลื่อน" ข้อมูล target = "#myScrollspy"> <div class = "ภาชนะ"> <div class = "jumbotron"> <h1> Bootstrap ติด </ h1 > </ div> <div class = "แถว"> <div class = "Col-XS-3 " id = "myScrollspy"> <ul class = "NAV NAV-NAV แท็บ -stacked" ข้อมูลสายลับ = "ติด" ข้อมูลชดเชยด้านบน = "125 "> <li class = "ใช้งาน"> <a href = "# ส่วน-1" > ส่วนแรก </ a> </ li> <li> <a href = "# ส่วน-2" > ส่วนที่สอง </ a> </ li> <li> <a href = "# ส่วน-3" > Part III </ a> </ li> <li> <a href = "# ส่วน 4" > Part IV </ a> </ li> <li> <a href = "# ส่วน-5" > Part V </ a> </ li> </ ul> </ div> <div class = "Col-XS-9 "> <H2 id = "ส่วน-1"> ส่วนแรก </ h2> <p> Lorem Ipsum บังคับ Amet นั่ง , consectetur adipiscing Elit. น้ำสหภาพยุโรป SEM tempor, Quam varius AT, luctus DUI. มาร์ท Magna Metus, dapibus NEC หรือ turpis, Semper malesuada ante. การพนัน ID Metus AC NISL Bibendum scelerisque ไม่ใช่ไม่ใช่ Purus. Suspendisse varius อะแดปเตอร์ที่ไม่ใช่ aliquet sagittis. ใน tincidunt Orci Amet นั่ง ELEMENTUM การพนัน. Vivamus fermentum ใน Arcu ในแบ่งปัน. Quisque แบ่งปัน Porta Odio ใน fringilla. Vivamus สิงห์ NISL, blandit ที่ Bibendum สหภาพยุโรปเทนนิส Eget Risus. จำนวนเต็ม aliquet Quam UT Elit suscipit, interdum ID วัด porttitor. จำนวนเต็ม ligula faucibus. < / p> <p> การพนันเลิกเชื่อ Quam UT Magna consequat faucibus. Pellentesque Eget ค้างคาไมล์ suscipit tincidunt. Ut Tempus ภาษิต Risus. Pellentesque viverra sagittis วิธีการที่ Mattis. potenti Suspendisse. แบ่งปัน Amet นั่งอะแดปเตอร์ Gravida, facilisis Gravida Odio. Phasellus auctor velit ที่ Lacus blandit , commodo ฟุตบอล Justo viverra. Etiam Vitae EST Arcu. มาร์ทหรือ congue บังคับ. แบ่งปัน Eget ไมล์ไมล์. ผู้ดูแลระบบ Quam tortor, commodo AC DUI โฟน, Bibendum viverra Erat. Maecenas Mattis Lectus enim, โฟน tincidunt DUI molestie euismod. Curabitur et เส้นผ่าศูนย์กลางเทนนิส, accumsan ในขณะนี้สหภาพยุโรปสำนัก Tellus. < / p> <hr> <H2 id = "ส่วนที่ 2"> ส่วนที่สอง </ h2> <p> Nullam สำนัก Justo ไม่ใช่สิงห์ aliquet imperdiet. Etiam ใน sagittis Lectus. Suspendisse ultrices placerat accumsan. มาร์ทโฟน dapibus Orci. ใน dapibus velit blandit pharetra tincidunt. Quisque ไม่ใช่ sapien NEC Lacus condimentum facilisis UT ฟุตบอล enim. Sed viverra interdum Bibendum. แบบพกพา AC sollicitudin บังคับ. sed fringilla Vitae คัส ที่ rutrum. Phasellus congue พนัน ligula sed consequat. </ p> <p> การพนัน consectetur scelerisque คัส, AC fermentum Lorem convallis sed. น้ำ tortor Odio, ภาษิตโฟน malesuada AT, Orci Vitae pellentesque. Vivamus ELEMENTUM, แมวสหภาพยุโรป lobortis auctor, diam velit egestas คัส, โฟน fermentum Metus ante โฟน urna. Sed ที่ facilisis Libero. Cum sociis natoque penatibus et magnis นี้ parturient เญิ nascetur ridiculus Mus. การพนัน Bibendum blandit บังคับ. ไม่ได้บังคับ Nunc Orci, อะแดปเตอร์ NEC molestie ในสำนัก tincidunt ante. Vivamus SEM augue, สำนักไม่ใช่ sapien ใน Mollis ornare augue. </ p > <hr> <H2 id = "ส่วนที่ 3"> Part III </ h2> <p> Integer วอลเลย์บอลสิงห์ ID Risus pellentesque การพนัน. Sed เส้นผ่าศูนย์กลาง Libero, sodales Eget sapien หรือ, porttitor Bibendum enim. แบบพกพา sed อะแดปเตอร์ Vitae Lorem porttitor blandit ใน NEC ante. Pellentesque Vitae Metus Ipsum. Phasellus sed ในขณะนี้ AC SEM malesuada condimentum. Etiam ใน แบ่งปัน Lectus. น้ำหรือ sapien diam. แบบพกพา pharetra ID Arcu Eget blandit. ไมโครเวฟ imperdiet Mattis augue ใน porttitor. Quisque Tempus enim ID lobortis feugiat. Suspendisse tincidunt Risus โฟนได้บังคับ fringilla blandit. Ut sapien sed ที่ Purus Lacinia porttitor. Nullam ฟุตบอล, แมว ราคาที่ ornare, บังคับ NISL Semper tortor, หรือ sagittis Lacus EST consequat อยู่. Sed ID ราคาที่ NISL. Curabitur บังคับ NISL, ปั๊ม ID Vitae แบ่งปัน, tincidunt Amet นั่งมาร์ท. </ p> <p> Phasellus Vitae suscipit Justo. มาร์ท pharetra feugiat ante ID Lacinia. Etiam faucibus มาร์ท ID egestas tempor. Duis luctus turpis ที่ accumsan tincidunt. Phasellus Risus Risus, volutpat หรือ Tellus AC, tincidunt fringilla Massa. Etiam สำนักบังคับ Eget ante rutrum adipiscing Cras Mattis interdum Ipsum, Tempus มาร์ทหรือ , Semper Ipsum. Duis sed บังคับ UT enim lobortis pellentesque ultricies AC ligula. pellentesque convallis Elit ค้างคา, ID vulputate Ipsum ullamcorper UT. Cras AC วอลเลย์บอล Purus, potenti AC viverra Est. Suspendisse. จำนวนเต็ม pellentesque วัด et ELEMENTUM Tempus. Curabitur Bibendum ใน ligula UT rhoncus. </ p> <p> Quisque pharetra velit ID velit ฟุตบอลราคาที่. Nullam Justo sed Porta ligula Semper สหภาพยุโรปโฟน enim. Pellentesque pellentesque, Metus ที่ facilisis สำนัก, Lectus velit facilisis สิงห์โฟน volutpat turpis Arcu โฟน enim. Nulla viverra Lorem ELEMENTUM interdum ultricies. Suspendisse accumsan Quam NEC ante Mollis Tempus. ผ้า หรือ accumsan เส้นผ่านศูนย์กลาง Eget convallis เทลลัส. Suspendisse potenti. </ p> <hr> <H2 id = "ส่วน-4"> Part IV </ h2> <p> Suspendisse Orci facilisis, dignissim tortor ประวัติ, ultrices ไมล์. การพนันฟุตบอลคัส. Phasellus Vitae convallis ligula, NEC volutpat เทลลัส. Vivamus scelerisque Mollis NISL, NEC vehicula Elit egestas ได้. Sed luctus Metus ID ไมล์ Gravida, faucibus convallis วัด ราคาที่. Maecenas โฟน sapien UT สิงห์ fringilla tempor Vitae Amet นั่งสิงห์. แบบพกพา imperdiet Tempus placerat. Pellentesque วอลเลย์บอล ultrices ในขณะนี้ SED ultrices. ผ้าหรือไมล์ราคาที่, fermentum Lacus et, viverra เทลลัส. Phasellus sodales Libero convallis NEC ข้อหา Amet นั่ง fermentum sapien auctor . การพนัน ante Ipsum Primis ใน faucibus Orci luctus et ultrices สอบถามข้อมูล cubilia Curae ;. Sed สหภาพยุโรป ELEMENTUM อะแดปเตอร์, โฟน varius Libero </ p> <p> การพนันเลิกเชื่อ Quam UT Magna consequat faucibus. Pellentesque Eget ค้างคาไมล์ suscipit tincidunt. Ut Tempus ภาษิต Risus. Pellentesque viverra sagittis วิธีการที่ Mattis. potenti Suspendisse. แบ่งปัน Amet นั่งอะแดปเตอร์ Gravida, facilisis Gravida Odio. Phasellus auctor velit ที่ Lacus blandit , commodo ฟุตบอล Justo viverra. Etiam Vitae EST Arcu. มาร์ทหรือ congue บังคับ. แบ่งปัน Eget ไมล์ไมล์. ผู้ดูแลระบบ Quam tortor, commodo AC DUI โฟน, Bibendum viverra Erat. Maecenas Mattis Lectus enim, โฟน tincidunt DUI molestie euismod. Curabitur et เส้นผ่าศูนย์กลางเทนนิส, accumsan ในขณะนี้สหภาพยุโรปสำนัก Tellus. < / p> <p> Phasellus fermentum, วัดนั่ง Amet tempor sodales, enim ante interdum ที่อยู่, Eget luctus Ipsum อยู่ UT ligula. Nunc ornare Erat โฟน faucibus molestie. ไมโครเวฟ malesuada consequat commodo. มาร์ทฟุตบอล, ที่อยู่ UT dapibus luctus สซ่า enim ELEMENTUM Purus นั่ง Amet เทนนิส Purus Purus NEC Felis. ผ้า พนัน sapien Eget Porta วอลเลย์บอล. น้ำที่ Quam diam. ไมโครเวฟ rhoncus, แมว ELEMENTUM accumsan ภาษิต, แมวค้างคาพนันเทลลัส, et ultrices Risus แมวใน Orci. Quisque พนัน SEM NISL, หรือ congue สิงห์ภาษิต NEC Cras Eget EST ที่ velit sagittis ullamcorper หรือ et Lectus. ใน HAC dictumst habitasse อยู่. Etiam interdum ฟุตบอล velit, หรือ sollicitudin Lorem feugiat Amet นั่ง. Etiam luctus, Quam SED sodales แบ่งปัน, Lorem Libero สำนัก urna, faucibus rhoncus Massa อะแดปเตอร์ที่ Felis. Curabitur AC Tempus nulla, UT Erat Semper. Vivamus Porta ullamcorper เส ornare egestas มาร์ท facilisis ID. </ p> <p> Ut UT Risus NISL. ผู้ดูแลระบบ porttitor อยู่ที่ Magna luctus ไม่ใช่ eleifend congue nulla. Aenean porttitor feugiat บังคับ Amet นั่ง facilisis. Pellentesque venenatis Magna et Risus commodo เป็น Gravida commodo turpis. น้ำ Mollis Massa dapibus urna aliquet, โฟนฟุตบอล Elit sodales. Sed Eget ornare Orci สหภาพยุโรป malesuada Justo. Nunc Lacus augue, ภาษิตโฟน DUI id, Lacinia congue Quam. Nulla SEM SEM, แบ่งปัน NEC ได้บังคับ AC, Tempus convallis ในขณะนี้. interdum et malesuada fames AC ante Ipsum Primis ใน faucibus. Nulla suscipit convallis ฟุตบอล. Quisque Eget commodo ligula. ติดต่อเราสิงห์ข้อหา facilisis eleifend โฟนใน aliquet ประวัติในขณะนี้. Suspendisse fermentum Odio AC Massa ultricies pellentesque. ผู้ดูแลระบบของสหภาพยุโรป suscipit Massa. </ p> <hr> <H2 id = "ส่วน-5"> Part V </ h2> <p> น้ำ Eget Purus NEC EST consectetur vehicula. Nullam ultrices Risus NISL ใน viverra Libero egestas Amet นั่ง. Etiam porttitor บังคับที่ไม่ใช่ที่อยู่วอลเลย์บอล malesuada. การพนัน Amet นั่ง EST Mollis nulla Tempus aliquet. ติดต่อเรา luctus สำนัก Arcu ไม่ใช่ปั๊ม. ผ้า consequat placerat Magna, AC ornare Odio sagittis sed. แบบพกพา Vitae ullamcorper Purus. Vivamus ไม่ใช่ Metus AC Justo Porta volutpat. </ p> <p> Vivamus Mattis accumsan Erat, หรือ convallis Risus ราคาที่ NEC. จำนวนเต็มในขณะนี้ nulla, viverra UT SEM บุหรี่, scelerisque vehicula Arcu. ผู้ดูแลระบบ Bibendum convallis augue Amet นั่ง lobortis. Cras Porta urna turpis, sodales ID lobortis Purus adipiscing. Maecenas ullamcorper, turpis suscipit fringilla pellentesque สซ่าคัสวอลเลย์บอลไมล์ , NEC dignissim velit Arcu Eget Purus. น้ำที่ dapibus เทลลัส, Eget euismod NISL. Ut Eget venenatis sapien. Vivamus vulputate varius มาร์ท, หรือ varius NISL facilisis AC. Nulla aliquet Justo อะแดปเตอร์ ornare สหภาพยุโรป congue วัด rutrum. </ p> <p> Suspendisse Orci facilisis, dignissim tortor ประวัติ, ultrices ไมล์. การพนันฟุตบอลคัส. Phasellus Vitae convallis ligula, NEC volutpat เทลลัส. Vivamus scelerisque Mollis NISL, NEC vehicula Elit egestas ได้. Sed luctus Metus ID ไมล์ Gravida, faucibus convallis วัด ราคาที่. Maecenas โฟน sapien UT สิงห์ fringilla tempor Vitae Amet นั่งสิงห์. แบบพกพา imperdiet Tempus placerat. Pellentesque วอลเลย์บอล ultrices ในขณะนี้ SED ultrices. ผ้าหรือไมล์ราคาที่, fermentum Lacus et, viverra เทลลัส. Phasellus sodales Libero convallis NEC ข้อหา Amet นั่ง fermentum sapien auctor . การพนัน ante Ipsum Primis ใน faucibus Orci luctus et ultrices สอบถามข้อมูล cubilia Curae ;. Sed สหภาพยุโรป ELEMENTUM อะแดปเตอร์, โฟน varius Libero </ p> <p> ผ้า sed fermentum Ipsum. ผ้า Orci vulputate tortor ornare blandit โฟน Orci. แบบพกพาแบ่งปัน sodales Gravida. ในยูทาห์ ullamcorper ค้างคา, AC ราคาที่ velit. การพนัน volutpat Vitae Lectus, consequat Lorem Amet นั่ง, เทลลัสวอลเลย์บอล. ใน tincidunt หรือสิงห์ Eget วอลเลย์บอล. Curabitur อยู่ไม่ใช่ Lacus แบ่งปัน malesuada. ติดต่อเรา et Tempus Odio. จำนวนเต็มในขณะนี้ Quam. ใน HAC dictumst habitasse อยู่. แบ่งปัน Porta อะแดปเตอร์ nulla, et Mattis turpis placerat Eget. Pellentesque DUI เส้นผ่านศูนย์กลาง pellentesque หรือ Gravida id, accumsan สหภาพยุโรป Magna . SED Arcu Semper, UT dignissim สิงห์. </ p> <p> SED Vitae lobortis เส้นผ่านศูนย์กลาง ID molestie Magna. แบ่งปัน consequat Ipsum โฟน EST ภาษิต ultrices. velit Aenean อะแดปเตอร์, fringilla เส้นผ่านศูนย์กลาง id, blandit สำนักคัส. แบบพกพา vehicula rutrum เทลลัส Eget fermentum. Pellentesque AC Erat et Arcu ornare tincidunt. แบ่งปัน Erat volutpat. Vivamus lobortis urna โฟน Gravida Semper . ใน condimentum, EST faucibus luctus ไมล์ไมล์ได้บังคับซัส, ID vehicula Arcu Risus อะแดปเตอร์. Pellentesque blandit sapien คัส, หรือ vehicula ในขณะนี้ feugiat Amet นั่ง. </ p> </ div> </ div> </ div> </ body> </ html>
ลอง»ผลมีดังนี้
- โดย javascript: คุณสามารถเพิ่มองค์ประกอบ JavaScript นำทางเพิ่มด้วยตนเอง (ติด) ดังต่อไปนี้:
$ ( '# MyAffix'). ติด ({ ชดเชย: { ด้านบน 100 ล่าง: ฟังก์ชั่น () { ผลตอบแทน (this.bottom = $ ( '. BS-ท้าย'). OuterHeight (จริง)) } } })ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของระบบนำทาง (ติด) วิดเจ็ตเพิ่มเติมผ่านการใช้งานจาวาสคริปต์:
ตัวอย่าง
<! DOCTYPE html> <html> <head> <Meta charset = "UTF-8"> <title> บูตนำทางเพิ่มเติม (ติด) วิดเจ็ต </ title> <link rel = "สไตล์ชีต" href = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src = "http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <script src = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"> </ script> <style>/ * ลักษณะที่กำหนดเอง * / UL .nav แท็บ { ความกว้าง: 140 พิกเซล ; margin-ด้านบน: 20 px ; border-radius: 4 px ; ชายแดน: 1 px ของแข็ง #ddd ; กล่องเงา: 0 1 px 4 px RGBA (0, 0, 0, 0.067) ;} UL .nav แท็บ li { margin: 0 ; ชายแดนด้านบน: 1 px ของแข็ง #ddd ;} UL .nav แท็บ Li: ครั้งแรกที่เด็ก { ขอบด้านบน: ไม่มีเลย ;} UL .nav แท็บ ลี้ ก { margin: 0 ; แผ่นรอง: 8 px 16 px ; border-radius: 0 ;} UL .nav แท็บ Li .active ที่ UL .nav แท็บ Li .active A: โฉบ { สี: # fff ; พื้นหลัง: # 0088cc ; ชายแดน: 1 px ของแข็ง # 0088cc ;} UL .nav แท็บ Li: ครั้งแรกที่เด็ก ก { border-radius: 4 px 4 px 0 0 ;} UL .nav แท็บ Li: สุดท้ายเด็ก ก { border-radius: 0 0 4 px 4 px ;} UL .affix .nav แท็บ { ด้านบน: 30 px ; / * กำหนดตำแหน่งบนสุดของ องค์ประกอบตรึง * / }</ style> <script>$ (เอกสาร). พร้อม (ฟังก์ชั่น () {$ ( "#myNav"). ติด ({ ชดเชย: { ด้านบน: 125 } });});</ script> </ head> <body ข้อมูลสายลับ = "เลื่อน" ข้อมูล target = "#myScrollspy"> <div class = "ภาชนะ"> <div class = "jumbotron"> <h1> Bootstrap ติด </ h1 > </ div> <div class = "แถว"> <div class = "Col-XS-3 " id = "myScrollspy"> <ul class = "NAV NAV-NAV แท็บ -stacked" id = "myNav"> <li class = "ใช้งาน"> <a href = "# ส่วน-1" > ส่วนแรก </ a> </ li> <li> <a href = "# ส่วน-2" > ส่วนที่สอง </ a> </ li> <li> <a href = "# ส่วน-3" > Part III </ a> </ li> <li> <a href = "# ส่วน 4" > Part IV </ a> </ li> <li> <a href = "# ส่วน-5" > Part V </ a> </ li> </ ul> </ div> <div class = "Col-XS-9 "> <H2 id = "ส่วน-1"> ส่วนแรก </ h2> <p> Lorem Ipsum บังคับ Amet นั่ง , consectetur adipiscing Elit. น้ำสหภาพยุโรป SEM tempor, Quam varius AT, luctus DUI. มาร์ท Magna Metus, dapibus NEC หรือ turpis, Semper malesuada ante. การพนัน ID Metus AC NISL Bibendum scelerisque ไม่ใช่ไม่ใช่ Purus. Suspendisse varius อะแดปเตอร์ที่ไม่ใช่ aliquet sagittis. ใน tincidunt Orci Amet นั่ง ELEMENTUM การพนัน. Vivamus fermentum ใน Arcu ในแบ่งปัน. Quisque แบ่งปัน Porta Odio ใน fringilla. Vivamus สิงห์ NISL, blandit ที่ Bibendum สหภาพยุโรปเทนนิส Eget Risus. จำนวนเต็ม aliquet Quam UT Elit suscipit, interdum ID วัด porttitor. จำนวนเต็ม ligula faucibus. < / p> <p> การพนันเลิกเชื่อ Quam UT Magna consequat faucibus. Pellentesque Eget ค้างคาไมล์ suscipit tincidunt. Ut Tempus ภาษิต Risus. Pellentesque viverra sagittis วิธีการที่ Mattis. potenti Suspendisse. แบ่งปัน Amet นั่งอะแดปเตอร์ Gravida, facilisis Gravida Odio. Phasellus auctor velit ที่ Lacus blandit , commodo ฟุตบอล Justo viverra. Etiam Vitae EST Arcu. มาร์ทหรือ congue บังคับ. แบ่งปัน Eget ไมล์ไมล์. ผู้ดูแลระบบ Quam tortor, commodo AC DUI โฟน, Bibendum viverra Erat. Maecenas Mattis Lectus enim, โฟน tincidunt DUI molestie euismod. Curabitur et เส้นผ่าศูนย์กลางเทนนิส, accumsan ในขณะนี้สหภาพยุโรปสำนัก Tellus. < / p> <hr> <H2 id = "ส่วนที่ 2"> ส่วนที่สอง </ h2> <p> Nullam สำนัก Justo ไม่ใช่สิงห์ aliquet imperdiet. Etiam ใน sagittis Lectus. Suspendisse ultrices placerat accumsan. มาร์ทโฟน dapibus Orci. ใน dapibus velit blandit pharetra tincidunt. Quisque ไม่ใช่ sapien NEC Lacus condimentum facilisis UT ฟุตบอล enim. Sed viverra interdum Bibendum. แบบพกพา AC sollicitudin บังคับ. sed fringilla Vitae คัส ที่ rutrum. Phasellus congue พนัน ligula sed consequat. </ p> <p> การพนัน consectetur scelerisque คัส, AC fermentum Lorem convallis sed. น้ำ tortor Odio, ภาษิตโฟน malesuada AT, Orci Vitae pellentesque. Vivamus ELEMENTUM, แมวสหภาพยุโรป lobortis auctor, diam velit egestas คัส, โฟน fermentum Metus ante โฟน urna. Sed ที่ facilisis Libero. Cum sociis natoque penatibus et magnis นี้ parturient เญิ nascetur ridiculus Mus. การพนัน Bibendum blandit บังคับ. ไม่ได้บังคับ Nunc Orci, อะแดปเตอร์ NEC molestie ในสำนัก tincidunt ante. Vivamus SEM augue, สำนักไม่ใช่ sapien ใน Mollis ornare augue. </ p > <hr> <H2 id = "ส่วนที่ 3"> Part III </ h2> <p> Integer วอลเลย์บอลสิงห์ ID Risus pellentesque การพนัน. Sed เส้นผ่าศูนย์กลาง Libero, sodales Eget sapien หรือ, porttitor Bibendum enim. แบบพกพา sed อะแดปเตอร์ Vitae Lorem porttitor blandit ใน NEC ante. Pellentesque Vitae Metus Ipsum. Phasellus sed ในขณะนี้ AC SEM malesuada condimentum. Etiam ใน แบ่งปัน Lectus. น้ำหรือ sapien diam. แบบพกพา pharetra ID Arcu Eget blandit. ไมโครเวฟ imperdiet Mattis augue ใน porttitor. Quisque Tempus enim ID lobortis feugiat. Suspendisse tincidunt Risus โฟนได้บังคับ fringilla blandit. Ut sapien sed ที่ Purus Lacinia porttitor. Nullam ฟุตบอล, แมว ราคาที่ ornare, บังคับ NISL Semper tortor, หรือ sagittis Lacus EST consequat อยู่. Sed ID ราคาที่ NISL. Curabitur บังคับ NISL, ปั๊ม ID Vitae แบ่งปัน, tincidunt Amet นั่งมาร์ท. </ p> <p> Phasellus Vitae suscipit Justo. มาร์ท pharetra feugiat ante ID Lacinia. Etiam faucibus มาร์ท ID egestas tempor. Duis luctus turpis ที่ accumsan tincidunt. Phasellus Risus Risus, volutpat หรือ Tellus AC, tincidunt fringilla Massa. Etiam สำนักบังคับ Eget ante rutrum adipiscing Cras Mattis interdum Ipsum, Tempus มาร์ทหรือ , Semper Ipsum. Duis sed บังคับ UT enim lobortis pellentesque ultricies AC ligula. Pellentesque convallis Elit ค้างคา, ID vulputate Ipsum ullamcorper UT. Cras AC วอลเลย์บอล Purus, potenti AC viverra Est. Suspendisse. จำนวนเต็ม pellentesque วัด et ELEMENTUM Tempus. Curabitur Bibendum ใน ligula UT rhoncus. </ p> <p> Quisque pharetra velit ID velit ฟุตบอลราคาที่. Nullam Justo sed Porta ligula Semper สหภาพยุโรปโฟน enim. Pellentesque pellentesque, Metus ที่ facilisis สำนัก, Lectus velit facilisis สิงห์โฟน volutpat turpis Arcu โฟน enim. Nulla viverra Lorem ELEMENTUM interdum ultricies. Suspendisse accumsan Quam NEC ante Mollis Tempus. ผ้า หรือ accumsan เส้นผ่านศูนย์กลาง Eget convallis เทลลัส. Suspendisse potenti. </ p> <hr> <H2 id = "ส่วน-4"> Part IV </ h2> <p> Suspendisse Orci facilisis, dignissim tortor ประวัติ, ultrices ไมล์. การพนันฟุตบอลคัส. Phasellus Vitae convallis ligula, NEC volutpat เทลลัส. Vivamus scelerisque Mollis NISL, NEC vehicula Elit egestas ได้. Sed luctus Metus ID ไมล์ Gravida, faucibus convallis วัด ราคาที่. Maecenas โฟน sapien UT สิงห์ fringilla tempor Vitae Amet นั่งสิงห์. แบบพกพา imperdiet Tempus placerat. Pellentesque วอลเลย์บอล ultrices ในขณะนี้ SED ultrices. ผ้าหรือไมล์ราคาที่, fermentum Lacus et, viverra เทลลัส. Phasellus sodales Libero convallis NEC ข้อหา Amet นั่ง fermentum sapien auctor . การพนัน ante Ipsum Primis ใน faucibus Orci luctus et ultrices สอบถามข้อมูล cubilia Curae ;. Sed สหภาพยุโรป ELEMENTUM อะแดปเตอร์, โฟน varius Libero </ p> <p> การพนันเลิกเชื่อ Quam UT Magna consequat faucibus. Pellentesque Eget ค้างคาไมล์ suscipit tincidunt. Ut Tempus ภาษิต Risus. Pellentesque viverra sagittis วิธีการที่ Mattis. potenti Suspendisse. แบ่งปัน Amet นั่งอะแดปเตอร์ Gravida, facilisis Gravida Odio. Phasellus auctor velit ที่ Lacus blandit , commodo ฟุตบอล Justo viverra. Etiam Vitae EST Arcu. มาร์ทหรือ congue บังคับ. แบ่งปัน Eget ไมล์ไมล์. ผู้ดูแลระบบ Quam tortor, commodo AC DUI โฟน, Bibendum viverra Erat. Maecenas Mattis Lectus enim, โฟน tincidunt DUI molestie euismod. Curabitur et เส้นผ่าศูนย์กลางเทนนิส, accumsan ในขณะนี้สหภาพยุโรปสำนัก Tellus. < / p> <p> Phasellus fermentum, วัดนั่ง Amet tempor sodales, enim ante interdum ที่อยู่, Eget luctus Ipsum อยู่ UT ligula. Nunc ornare Erat โฟน faucibus molestie. ไมโครเวฟ malesuada consequat commodo. มาร์ทฟุตบอล, ที่อยู่ UT dapibus luctus สซ่า enim ELEMENTUM Purus นั่ง Amet เทนนิส Purus Purus NEC Felis. ผ้า พนัน sapien Eget Porta วอลเลย์บอล. น้ำที่ Quam diam. ไมโครเวฟ rhoncus, แมว ELEMENTUM accumsan ภาษิต, แมวค้างคาพนันเทลลัส, et ultrices Risus แมวใน Orci. Quisque พนัน SEM NISL, หรือ congue สิงห์ภาษิต NEC Cras Eget EST ที่ velit sagittis ullamcorper หรือ et Lectus. ใน HAC dictumst habitasse อยู่. Etiam interdum ฟุตบอล velit, หรือ sollicitudin Lorem feugiat Amet นั่ง. Etiam luctus, Quam SED sodales แบ่งปัน, Lorem Libero สำนัก urna, faucibus rhoncus Massa อะแดปเตอร์ที่ Felis. Curabitur AC Tempus nulla, UT Erat Semper. Vivamus Porta ullamcorper เส ornare egestas มาร์ท facilisis ID. </ p> <p> Ut UT Risus NISL. ผู้ดูแลระบบ porttitor อยู่ที่ Magna luctus ไม่ใช่ eleifend congue nulla. Aenean porttitor feugiat บังคับ Amet นั่ง facilisis. Pellentesque venenatis Magna et Risus commodo เป็น Gravida commodo turpis. น้ำ Mollis Massa dapibus urna aliquet, โฟนฟุตบอล Elit sodales. Sed Eget ornare Orci สหภาพยุโรป malesuada Justo. Nunc Lacus augue, ภาษิตโฟน DUI id, Lacinia congue Quam. Nulla SEM SEM, แบ่งปัน NEC ได้บังคับ AC, Tempus convallis ในขณะนี้. interdum et malesuada fames AC ante Ipsum Primis ใน faucibus. Nulla suscipit convallis ฟุตบอล. Quisque Eget commodo ligula. ติดต่อเราสิงห์ข้อหา facilisis eleifend โฟนใน aliquet ประวัติในขณะนี้. Suspendisse fermentum Odio AC Massa ultricies pellentesque. ผู้ดูแลระบบของสหภาพยุโรป suscipit Massa. </ p> <hr> <H2 id = "ส่วน-5"> Part V </ h2> <p> น้ำ Eget Purus NEC EST consectetur vehicula. Nullam ultrices Risus NISL ใน viverra Libero egestas Amet นั่ง. Etiam porttitor บังคับที่ไม่ใช่ที่อยู่วอลเลย์บอล malesuada. การพนัน Amet นั่ง EST Mollis nulla Tempus aliquet. ติดต่อเรา luctus สำนัก Arcu ไม่ใช่ปั๊ม. ผ้า consequat placerat Magna, AC ornare Odio sagittis sed. แบบพกพา Vitae ullamcorper Purus. Vivamus ไม่ใช่ Metus AC Justo Porta volutpat. </ p> <p> Vivamus Mattis accumsan Erat, หรือ convallis Risus ราคาที่ NEC. จำนวนเต็มในขณะนี้ nulla, viverra UT SEM บุหรี่, scelerisque vehicula Arcu. ผู้ดูแลระบบ Bibendum convallis augue Amet นั่ง lobortis. Cras Porta urna turpis, sodales ID lobortis Purus adipiscing. Maecenas ullamcorper, turpis suscipit fringilla pellentesque สซ่าคัสวอลเลย์บอลไมล์ , NEC dignissim velit Arcu Eget Purus. น้ำที่ dapibus เทลลัส, Eget euismod NISL. Ut Eget venenatis sapien. Vivamus vulputate varius มาร์ท, หรือ varius NISL facilisis AC. Nulla aliquet Justo อะแดปเตอร์ ornare สหภาพยุโรป congue วัด rutrum. </ p> <p> Suspendisse Orci facilisis, dignissim tortor ประวัติ, ultrices ไมล์. การพนันฟุตบอลคัส. Phasellus Vitae convallis ligula, NEC volutpat เทลลัส. Vivamus scelerisque Mollis NISL, NEC vehicula Elit egestas ได้. Sed luctus Metus ID ไมล์ Gravida, faucibus convallis วัด ราคาที่. Maecenas โฟน sapien UT สิงห์ fringilla tempor Vitae Amet นั่งสิงห์. แบบพกพา imperdiet Tempus placerat. Pellentesque วอลเลย์บอล ultrices ในขณะนี้ SED ultrices. ผ้าหรือไมล์ราคาที่, fermentum Lacus et, viverra เทลลัส. Phasellus sodales Libero convallis NEC ข้อหา Amet นั่ง fermentum sapien auctor . การพนัน ante Ipsum Primis ใน faucibus Orci luctus et ultrices สอบถามข้อมูล cubilia Curae ;. Sed สหภาพยุโรป ELEMENTUM อะแดปเตอร์, โฟน varius Libero </ p> <p> ผ้า sed fermentum Ipsum. ผ้า Orci vulputate tortor ornare blandit โฟน Orci. แบบพกพาแบ่งปัน sodales Gravida. ในยูทาห์ ullamcorper ค้างคา, AC ราคาที่ velit. การพนัน volutpat Vitae Lectus, consequat Lorem Amet นั่ง, เทลลัสวอลเลย์บอล. ใน tincidunt หรือสิงห์ Eget วอลเลย์บอล. Curabitur อยู่ไม่ใช่ Lacus แบ่งปัน malesuada. ติดต่อเรา et Tempus Odio. จำนวนเต็มในขณะนี้ Quam. ใน HAC dictumst habitasse อยู่. แบ่งปัน Porta อะแดปเตอร์ nulla, et Mattis turpis placerat Eget. pellentesque DUI เส้นผ่านศูนย์กลาง pellentesque หรือ Gravida id, accumsan สหภาพยุโรป Magna . SED Arcu Semper, UT dignissim สิงห์. </ p> <p> SED Vitae lobortis เส้นผ่านศูนย์กลาง ID molestie Magna. แบ่งปัน consequat Ipsum โฟน EST ภาษิต ultrices. velit Aenean อะแดปเตอร์, fringilla เส้นผ่านศูนย์กลาง id, blandit สำนักคัส. แบบพกพา vehicula rutrum เทลลัส Eget fermentum. Pellentesque AC Erat et Arcu ornare tincidunt. แบ่งปัน Erat volutpat. Vivamus lobortis urna โฟน Gravida Semper . ใน condimentum, EST faucibus luctus ไมล์ไมล์ได้บังคับซัส, ID vehicula Arcu Risus อะแดปเตอร์. Pellentesque blandit sapien คัส, หรือ vehicula ในขณะนี้ feugiat Amet นั่ง. </ p> </ div> </ div> </ div> </ body> </ html>
ลอง»ผลมีดังนี้
โดยตำแหน่ง CSS
ในข้างต้นด้วยการนำสองเพิ่มเติม (ติด) plug-in โหมดคุณต้องไปผ่านเนื้อหาตำแหน่ง CSS นำทางเพิ่มเติม (ติด) plug-inสลับระหว่างสามชั้นแต่ละชั้นได้แสดงให้เห็นรัฐโดยเฉพาะ:.affix, .affixด้านบนและด้านล่าง .affixทำตามขั้นตอนนี้เพื่อตั้งค่า CSS ของคุณเองสำหรับทั้งสามรัฐ (ไม่ต้องพึ่งพาปลั๊กอินนี้)
- ที่จุดเริ่มต้นเพิ่มองค์ประกอบปลั๊กอิน .affix ด้านบนเพื่อแสดงในตำแหน่งสูงสุดของมันเวลานี้ไม่จำเป็นต้องวางตำแหน่ง CSS ใด ๆ
- เมื่อเลื่อนผ่านการเพิ่มระบบนำทาง (ติด) องค์ประกอบเพิ่มเติมก็ควรเรียกนำทางเพิ่มเติมที่เกิดขึ้นจริง (ติด) ที่.affix จุดนี้จะเข้ามาแทนที่ .affix บนและตำแหน่งตั้ง:ถาวร (โดยโค้ด CSS Bootstrap)
- หากคุณกำหนดด้านล่างของชดเชยเมื่อเลื่อนถึงตำแหน่งนี้ควร.affix แทนที่ .affix ล่างนับตั้งแต่การชดเชยเป็นตัวเลือกถ้าคุณตั้งค่าชดเชยเป็นสิ่งจำเป็นในเวลาเดียวกันที่ตั้ง CSS ที่เหมาะสมในกรณีนี้ให้เพิ่มตำแหน่งเมื่อมีความจำเป็น: absolute ;.
ตัวเลือก
มีตัวเลือกบางอย่างจะผ่านข้อมูลแอตทริบิวต์หรือ JavaScript ที่จะผ่าน ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| offset | number | function | object 默认值：10 | data-offset | 当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移，则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移，请使用函数。 |