يتيح المكون الإضافي للملاحة (Affix) الإضافية تثبيت <Div> في مكان ما على الصفحة. يمكنك أيضًا التبديل بين التشغيل أو إيقاف تشغيله باستخدام البرنامج المساعد. مثال شائع هو الرموز الاجتماعية. سيبدأون في مكان ما ، ولكن عندما تنقر الصفحة على علامة ، ستنقل <Div> في مكان ما ولن يتم التمرير مع بقية الصفحة.
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى Affix.js. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
الاستخدام
يمكنك استخدام المكون الإضافي المرفق (Affix) عبر خصائص البيانات أو عبر JavaScript.
من خلال سمات البيانات: إذا كنت بحاجة إلى إضافة سلوك إضافي للتنقل (Affix) إلى العنصر ، فأنت بحاجة فقط إلى إضافة Data-Spy = "Affix" إلى العنصر الذي تحتاجه إلى الاستماع إليه. استخدم الإزاحة لتحديد وقت قفل العناصر والحركة.
مثال
يوضح المثال التالي كيفية استخدام مكون إضافي للتنقل (Affix) من خلال سمة البيانات:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> bootstrap الملاحة المرفقة (Affix) المكون الإضافي </title> <link href = "/bootstrap/css/bootstrap.min.cs src = "/scripts/jquery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <style type = "text/css">/ * custom styles */ul.nav-tabs {width: 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 {top: none ؛} 16px ؛ الحدود الحدودية: 0 ؛} ul.nav-tabs li.active a ، ul.nav-tabs li.active a: hover {color: #ffff ؛ background: #0088cc ؛ الحدود: 1px solid #0088cc ؛} ul.nav-tabs li: first child a {border-radius: 4px 4px 0 0 0 0 0 0 0 0 0 ؛ A {Border-Radius: 0 0 4px 4px ؛} ul.nav-tabs.affix {top: 30px ؛ / * قم بتعيين الموضع الأعلى للعنصر المثبت */} </style> </head> <body data-spy = "scroll" data-target = "#myscrollspy"> <viv> <liv> <h1> bootstrap appix </h1> </fiv> <div id = "myscrollspy" href = "#section-1"> الجزء 1 </a> </li> <li> <a href = "#section-2"> الجزء 2 </a> </li> <li> <a href = "#section-3"> الجزء 3 </a> </li> <li> <li> <a href = "#section-4" 5 </a> </li> </ul> </viv> <viv> <h2 id = "section-1"> الجزء 1 </h2> <p> lorem ipsum dolor sit amet ، elet apiscing olit. NAM EU SEM TEMPOR ، VARIUS QUAM AT ، LUCTUS DUI. Mauris Magna Metus ، Dapibus NEC Turpis Vel ، Semper Malesuada Ante. الدهليز معرف metus ac nisl bibendum scelerisque غير بوروس. Superendisse varius nibh non aliquet sagittis. في Tincidunt Orci Sit Amet Elementum Sastibulum. vivamus fermentum في arcu في aliquam. Quisque Aliquam Porta Odio في Fringilla. Vivamus NISL Leo ، Blandit في Bibendum Eu ، Tristique Eget Risk. Integer ALIQUET QUAM UT ELIT SUSCIPIT ، ID interdum neque porttitor. عدد صحيح faucibus ligula. </p> <p> الدهليز quis quam ut magna نتيجة faucibus. Pellentesque eget nisi a mi suscipit tincidunt. UT Tempus Dictum Risus. Pellentesque Viverra Sagittis Quam في Mattis. SuperNdisse المحتملة. Aliquam Sit Amet Gravida Nibh ، Hucilisis Gravida Odio. Phasellus Autor Velit في Lacus Blandit ، Commodo Iaculis Justo Viverra. etiam vitae est arcu. موريس فيل كونجو دولور. Aliquam Eget Mi Mi. Fusce Quam Turtor ، 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. </p> <hr> <h2 id = "Section-2"> الجزء 2 </h2> <p> nullam hendrerit فقط غير leo aliquet imperdiet. Etiam في Sagittis محاضرة. SuperNdisse ultrices placera accumsan. موريس Quis Dapibus orci. في Dapibus Velit Blandit Pharetra Tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. سيد Viverra Interdum bibendum. Donec AC Sollicitudin Dolor. Sed Fringilla Vitae Lacus في Rutrum. Phasellus Congue Sastibulum Ligula SED. نام أوديو توعية ، dictum quis malesuada في ، Pellenentesque Vitae orci. Vivamus Elementum ، Felis EU Autor lobortis ، Diam Velit egestas lacus ، quis fermentum metus quis quis urna. SED في الوجه ليبرو. نائب الرئيس Sociis الناتو penatibus et magnis dis parturient montes ، nascetur ridiculus mus. الدهليز bibendum بلانديت دولور. Nunc Orci Dolor ، Moleestie NEC NIBH in ، Hendrerit Tincidunt Ante. Vivamus SEM Augue ، Hendrerit non sapien in ، Mollis ornare Augue. </p> <hr> <h2 id = "section-3"> الجزء الثالث </h2> <p> integer pulvinar leo id riskus pelletesque pelletesque. Sed Diamond Libero ، Sodales Eget Sapien Vel ، Porttitor Bibendum Enim. Donec SED NIBH VITAE LOREM Porttitor Blandit في NEC ante. Pellentesque Vitae Metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. ETIAM في ALIQUAM Lectus. نام فيل سابين قطر. Donec Pharetra id arcu Egg Blandit. Proin Imperdiet Mattis Augue في Porttitor. Quisque Tempus enim id lobortis feugiat. Superendisse Tincidunt Riskus Quis Dolor Fringilla Blandit. UT SED SAPIEN في Purus Lacinia Porttitor. Nullam Iaculis ، Felis a Pretium ornare ، Dolor NISL Semper Turtor ، Vel sagittis lacus est نتيجة EROS. السيد 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 tempor egestas. DUIS LUCTUS TURPIS في Accumsan Tincidunt. مخاطر Phasellus 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 Vulptate ipsum ulamcorper ut. كراس AC pulvinar purus ، ac viverra est. عدد صحيح بيليتسك neque et elementum tempus. curabitur bibendum في ligula ut rhoncus. </p> <p> quisque pharetra velit id velit iaculis pretium. Nullam a Justo Sed Ligula porta semper eu quis enim. Pellentesque Pelentesque ، Metus في Hugilisis Hendrerit ، Lectus Velit facilisis leo ، quis volutpat turpis arcu quis enim. nulla viverra lorem elementum interdum intricies. SuperNdisse Accumsan quam nec ante mollis tempus. Morbi Vel Accumsan Diamond ، Eget Convallis Tellus. succedisse acpalitive. </p> <hr> <h2 id = "section-4"> الجزء 4 </h2> <p> superingsse a orci facilisis ، dignissim turtor vitae ، ultrices mi. الدهليز A iaculis 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 regh ite 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. Vestiblum ante ipsum primis في faucibus orci luctus et ultrices posuere cubilia curae ؛ SED EU Elementum NIBH ، QUIS varius libero. </p> <p> vestiblum quis quam ut magna نتيجة faucibus. Pellentesque Egg Nisi a mi suscipit tincidunt. UT Tempus Dictum Risus. Pellentesque Viverra Sagittis Quam في Mattis. SuperNdisse المحتملة. Aliquam Sit Amet Gravida Nibh ، Hucilisis Gravida Odio. Phasellus Autor Velit في Lacus Blandit ، Commodo Iaculis Justo Viverra. etiam vitae est arcu. موريس فيل كونجو دولور. Aliquam Eget Mi Mi. Fusce Quam Turtor ، 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. </p> <p> phasellus fermentum ، neque sit amet sodales tempor ، enim inte interum eros ، eget luctus ipsum eros ut ligula. nunc ornare erat quis fabucibus moleestie. Proin Malesuada نتيجة العميد. Mauris Iaculis ، eros ut dapibus luctus ، massa eleme elementum purus ، sit amet tristique purus purus nec felis. Morbi Presien sapien eget porta pulvinar. نام في قطر QUAM. Proin Rhoncus ، Felis Elementum Accumsan Dictum ، Felis Nisi Drastibulum Tellus ، et ultrices Risus Felis في Orci. Quisque Dastibulum sem nisl ، vel congue leo dictum nec. Cras eget est at Velit sagittis ullamcorper vel et lectus. في HAC Habitasse Platea Dictumst. etiam interdum iaculis velit ، vel sollicitudin lorem feugiat sit amet. Etiam Luctus ، Quam Sed Sodales Aliquam ، Lorem Libero Hendrerit Urna ، faucibus rhoncus massa nibh في فيليس. curabitur ac tempus nulla ، ut semper erat. Vivamus Porta Ullamcorper SEM ، ornare egestas mauris facilisis id. </p> <p> ut ut risk nisl. Fusce Porttitor Eros في Magna Luctus ، غير Congue 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. سيد Eget Ornare Orci ، الاتحاد الأوروبي 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 في faucibus. nulla suscipit convallis iaculis. Quisque Eget Commodo Ligula. Praesent Leo DUI ، hacilisis quis eleifend in ، aliquet vitae nunc. SuperNdisse Fermentum Odio AC Massa Ultristies Pellenentesque. fusce EU suscipit massa. </p> <hr> <h2 id = "section-5"> الجزء 5 </h2> <p> nam eget purus nec est constertur queticula. Nullam Ultrices NISL Risk ، في Viverra Libero Egestas Sit Amet. Etiam Porttitor Dolor non eros pulvinar malesuada. الدهليز الجلوس 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. </p> <p> vivamus mattis accumsan erat ، vel convallis risk pretium nec. Integer Nunc Nulla ، Viverra UT SEM Non ، Sclerisque Fearicula Arcu. fusce bibendum convallis Augue Sit Amet lobortis. كراس بورتا urna turpis ، sodales lobortis purus apiscing id. Maecenas Ullamcorper ، turpis suscipit pelentesque fringilla ، massa lacus pulvinar mi ، nec dignissim velit arcu eget purus. NAM في Dapibus Tellus ، Eget Euismod NISL. ut eget venenatis sapien. Vivamus Vulptate varius mauris ، vel varius nisl facilisis ac. nulla aliquet مجرد nibh ornare ، eu congue neque rutrum. </p> <p> superendisse a orci facilisis ، dignissim turtor it ، ultrices mi. الدهليز A iaculis 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 regh ite 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. الدهليز ante ipsum primis في faucibus orci luctus et ultrices posuere cubilia curae ؛ SED EU Elementum NIBH ، Quis varius Libero. </p> <p> Morbi sed fermentum ipsum. MORBI A ORCI Vulptate Turnare Ornare Blandit A quis orci. Donec Aliquam Sodales Gravida. في ut ulamcorper nisi ، ac pretium velit. سيرة الدهليز محاضرة Volutpat ، ونتيجة لذلك Lorem Sit Amet ، pulvinar tellus. في Tincidunt Vel Leo Eget Pulvinar. curabitur a eros non lacus malesuada aliquam. praesent et tempus odio. عدد صحيح في 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. </p> <p> sed vitae lobortis diam ، id magna magna. aliquam تترافق مع ipsum quis est dictum ultrices. Aenean nibh velit ، fringilla in diam id ، Blandit Hendrerit lacus. Donec Fearicula Rutrum يروي Egg 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 quetula arcu خطر nibh. Pellentesque Blandit sapien lacus ، Vel queicula nunc feugiat sit amet. </p> </viv> </viv> </viv> </body> </html>النتائج كما يلي:
من خلال JavaScript: يمكنك إضافة تنقل إضافي (Affix) يدويًا إلى عنصر من خلال JavaScript ، كما هو موضح أدناه:
$ ('#myaffix'). Affix ({Offset: {top: 100 ، bottom: function () {return (this.bottom = $ ('.مثال
يوضح المثال التالي كيفية استخدام البرنامج المساعد الإضافي للتنقل (Affix) عبر JavaScript:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> bootstrap الملاحة المرفقة (Affix) المكون الإضافي </title> <link href = "/bootstrap/css/bootstrap.min.cs src = "/scripts/jquery.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <style type = "text/css">/ * custom styles */ul.nav-tabs {width: 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 {top: none ؛} 16px ؛ الحدود الحدودية: 0 ؛} ul.nav-tabs li.active a ، ul.nav-tabs li.active a: hover {color: #ffff ؛ background: #0088cc ؛ الحدود: 1px solid #0088cc ؛} ul.nav-tabs li: first child a {border-radius: 4px 4px 0 0 0 0 0 0 0 0 0 ؛ A {Border-Radius: 0 0 4px 4px ؛} ul.nav-tabs.affix {top: 30px ؛ / * قم بتعيين الموضع الأعلى للعنصر المثبت */} </style> <script type = "text/javaScript"> $ (document) .Ready (function () {$ ("#mynav"). data-target = "#myscrollspy"> <viv> <viv> <h1> bootstrap appix </h1> </viv> <viv> <div id = "myscrollspy"> <ul id = "mynav"> <li> <A. ii </a> </li> <li> <a href = "#section-3"> الجزء الأول </a> </li> <li> <a href = "#section-4"> part IV </a> </li> <li> <a href = "#section-5"> part 5 </a> </li> 1 </h2> <p> lorem ipsum dolor sit amet ، constertur adipiscing leit. NAM EU SEM TEMPOR ، 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. Superendisse varius nibh non aliquet sagittis. في Tincidunt Orci Sit Amet Elementum Sastibulum. vivamus fermentum في arcu في aliquam. Quisque Aliquam Porta Odio في Fringilla. Vivamus NISL Leo ، Blandit في Bibendum Eu ، Tristique Eget Riskus. Integer ALIQUET QUAM UT ELIT SUSCIPIT ، ID interdum neque porttitor. عدد صحيح faucibus ligula. </p> <p> الدهليز quis quam ut magna نتيجة faucibus. Pellentesque eget nisi a mi suscipit tincidunt. ut tempus dictum خطر. Pellentesque Viverra Sagittis Quam في Mattis. SuperNdisse المحتملة. Aliquam Sit Amet Gravida Nibh ، Hucilisis Gravida Odio. Phasellus Autor Velit في Lacus Blandit ، Commodo Iaculis Justo Viverra. etiam vitae est arcu. موريس فيل كونجو دولور. Aliquam Eget Mi Mi. Fusce Quam Turtor ، 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. </p> <hr> <h2 id = "Section-2"> الجزء 2 </h2> <p> nullam hendrerit فقط غير leo aliquet imperdiet. Etiam في Sagittis محاضرة. SuperNdisse ultrices placera accumsan. موريس Quis Dapibus orci. في Dapibus Velit Blandit Pharetra Tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. سيد Viverra Interdum bibendum. Donec AC Sollicitudin Dolor. Sed Fringilla Vitae Lacus في Rutrum. Phasellus Congue Sastibulum ligula SED. نام أوديو توعية ، dictum quis malesuada في ، Pellenentesque Vitae orci. Vivamus elementum ، Felis Eu Autor lobortis ، Diam Velit egstas lacus ، Quis fermentum metus ante quis urna. SED في الوجه ليبرو. نائب الرئيس Sociis الناتو penatibus et magnis dis parturient montes ، nascetur ridiculus mus. الدهليز bibendum بلانديت دولور. Nunc Orci Dolor ، Moleestie NEC NIBH in ، Hendrerit Tincidunt Ante. Vivamus SEM Augue ، Hendrerit non sapien in ، Mollis ornare Augue. </p> <hr> <h2 id = "section-3"> الجزء الثالث </h2> <p> integer pulvinar leo id riskus pelletesque pelletesque. Sed Diamond Libero ، Sodales Eget Sapien Vel ، Porttitor Bibendum Enim. Donec SED NIBH VITAE LOREM Porttitor Blandit في NEC ante. Pellentesque Vitae Metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. ETIAM في ALIQUAM Lectus. نام فيل سابين قطر. Donec Pharetra id arcu Egg Blandit. Proin Imperdiet Mattis Augue في Porttitor. Quisque Tempus enim id lobortis feugiat. Superendisse Tincidunt Riskus Quis Dolor Fringilla Blandit. UT SED SAPIEN في Purus Lacinia Porttitor. Nullam Iaculis ، Felis a Pretium ornare ، Dolor NISL Semper Turtor ، Vel sagittis lacus est نتيجة EROS. السيد 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 tempor egstas. DUIS LUCTUS TURPIS في Accumsan Tincidunt. 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 Vulptate ipsum ulamcorper ut. كراس AC pulvinar purus ، ac viverra est. عدد صحيح pelentesque neque et elementum tempus. curabitur bibendum في ligula ut rhoncus. </p> <p> quisque pharetra velit id velit iaculis pretium. nullam a just sed ligula porta semper eu quis enim. Pellentesque Pelentesque ، Metus في Hugilisis Hendrerit ، Lectus Velit facilisis leo ، quis volutpat turpis arcu quis enim. nulla viverra lorem elementum interdum intricies. SuperNdisse Accumsan quam nec ante mollis tempus. Morbi Vel Accumsan Diamond ، Eget Convallis Tellus. succedisse acpalitive. </p> <hr> <h2 id = "section-4"> الجزء 4 </h2> <p> superingsse a orci facilisis ، dignissim turtor vitae ، ultrices mi. الدهليز A iaculis 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 reghipor 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. Vestiblum ante ipsum primis في faucibus orci luctus et ultrices posuere cubilia curae ؛ SED EU Elementum NIBH ، QUIS varius libero. </p> <p> الدهليز quis quam ut magna نتيجة faucibus. Pellentesque eget nisi a mi suscipit tincidunt. UT Tempus Dictum Risus. Pellentesque Viverra Sagittis Quam في Mattis. SuperNdisse المحتملة. Aliquam Sit Amet Gravida Nibh ، Hucilisis Gravida Odio. Phasellus Autor Velit في Lacus Blandit ، Commodo Iaculis Justo Viverra. etiam vitae est arcu. موريس فيل كونجو دولور. Aliquam Eget Mi Mi. Fusce Quam Turtor ، 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. </p> <p> phasellus fermentum ، neque sit amet sodales tempor ، enim inte interum eros ، eget luctus ipsum eros ut ligula. nunc ornare erat quis fabucibus moleestie. Proin Malesuada نتيجة العميد. Mauris Iaculis ، eros ut dapibus luctus ، massa eleme elementum purus ، sit amet tristique purus purus nec felis. Morbi Presien sapien eget porta pulvinar. نام في قطر QUAM. Proin Rhoncus ، Felis Elementum Accumsan Dictum ، Felis Nisi Drastibulum Tellus ، ET Ultrices Felis في ORCI. Quisque Dastibulum sem nisl ، vel congue leo dictum nec. Cras eget est at Velit sagittis ullamcorper vel et lectus. في HAC Habitasse Platea Dictumst. etiam interdum iaculis velit ، vel sollicitudin lorem feugiat sit amet. Etiam Luctus ، Quam Sed Sodales Aliquam ، Lorem Libero Hendrerit Urna ، faucibus rhoncus massa nibh في فيليس. curabitur ac tempus nulla ، ut semper erat. Vivamus Porta Ullamcorper SEM ، ornare egestas mauris facilisis id. </p> <p> ut ut risk nisl. Fusce Porttitor Eros في Magna Luctus ، غير Congue nulla eleifend. Aenean Porttitor Feugiat Dolor Sit Amet facilisis. Pellentesque Venenatis Magna et Risus Commodo ، Commodo Turpis Gravida. Nam Mollis Massa Dapibus urna aliquet ، quis iaculis elit sodales. سيد Eget Ornare Orci ، الاتحاد الأوروبي 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 في faucibus. nulla suscipit convallis iaculis. Quisque Eget Commodo Ligula. Praesent Leo DUI ، hacilisis quis eleifend in ، aliquet vitae nunc. SuperNdisse Fermentum Odio AC Massa Ultristies Pellenentesque. fusce EU suscipit massa. </p> <hr> <h2 id = "section-5"> الجزء 5 </h2> <p> nam eget purus nec est contincultur queticula. Nullam Ultrices NISL Risk ، في Viverra Libero egstas Sit Amet. Etiam Porttitor Dolor non eros pulvinar malesuada. الدهليز الجلوس 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. </p> <p> vivamus mattis accumsan erat ، vel convallis risk pretium nec. Integer Nunc Nulla ، Viverra UT SEM Non ، Sclerisque Fearicula Arcu. fusce bibendum convallis Augue Sit Amet lobortis. كراس بورتا urna turpis ، sodales lobortis purus apiscing id. Maecenas Ullamcorper ، turpis suscipit pelentesque fringilla ، massa lacus pulvinar mi ، nec dignissim velit arcu eget purus. NAM في Dapibus Tellus ، Eget Euismod NISL. ut eget venenatis sapien. Vivamus Vulptate varius mauris ، vel varius nisl facilisis ac. nulla aliquet مجرد nibh ornare ، eu congue neque rutrum. </p> <p> superendisse a orci facilisis ، dignissim turtor it ، ultrices mi. الدهليز A iaculis 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 regh ite 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. Vestiblum ante ipsum primis في faucibus orci luctus et ultrices posuere cubilia curae ؛ SED EU Elementum NIBH ، Quis varius Libero. </p> <p> Morbi sed fermentum ipsum. MORBI A ORCI Vulptate Turnare Ornare Blandit A quis orci. Donec Aliquam Sodales Gravida. في ut ulamcorper nisi ، ac pretium velit. سيرة الدهليز محاضرة Volutpat ، ونتيجة لذلك Lorem Sit Amet ، pulvinar tellus. في Tincidunt Vel Leo Eget Pulvinar. curabitur a eros non lacus malesuada aliquam. praesent et tempus odio. عدد صحيح في 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. </p> <p> sed vitae lobortis diam ، id magna magna. aliquam تترافق مع ipsum quis est dictum ultrices. Aenean nibh velit ، fringilla in diam id ، Blandit Hendrerit lacus. Donec Fearicula Rutrum يروي Egg 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 quetula arcu خطر nibh. Pellentesque Blandit Sapien lacus ، Vel quetula nunc feugiat sit amet. </p> </viv> </viv> </body> </html>النتائج كما يلي:
تحديد المواقع عبر CSS
في كلتا الطريقتين المذكورة أعلاه لاستخدام المكون الإضافي لـ Affix ، يجب عليك تحديد موقع المحتوى عبر CSS. يتم تبديل المكونات الإضافية الإضافية للتنقل (Affix) بين ثلاث فئات ، كل منها يقدم حالة محددة: .affix و .affix-top و .affix-bottom. يرجى اتباع الخطوات أدناه لإعداد CSS الخاص بك لهذه الحالات الثلاث (لا تعتمد على هذا البرنامج المساعد).
في البداية ، يضيف المكون الإضافي .fix-top للإشارة إلى العنصر في وضعه الأعلى. لا يلزم تحديد موقع CSS في هذا الوقت.
عند التمرير عبر عنصر يتم فيه إضافة التنقل الإضافي (Affix) ، يجب تشغيل التنقل الإضافي الفعلي (Affix). في هذا الوقت ، سوف يحل .affix محل. (المقدمة بواسطة رمز CSS في Bootstrap).
إذا تم تعريف الإزاحة السفلية ، عندما يصل التمرير إلى هذا الموضع ، استبدل .affix باستخدام .affix-bottom. نظرًا لأن الإزاحة اختيارية ، إذا تم تعيين الإزاحة ، فيجب تعيين CSS المناسب في نفس الوقت. في هذه الحالة ، أضف الموقف: مطلق ؛ إذا لزم الأمر.
خيارات
هناك بعض الخيارات التي يتم تمريرها من خلال خصائص البيانات أو JavaScript. يسرد الجدول التالي هذه الخيارات:
ما ورد أعلاه هو التفسير التفصيلي لمؤسس الإضافات الإضافية للتنقل الإضافي (AFFIX) الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع!