Latest web development tutorials

Bootstrap navigation supplémentaire (Affix) un widget

Supplémentaires de navigation (Affix) plug-in permet à un <div> fixe à une certaine position sur la page. Vous pouvez également activer ou désactiver l'aide d'un interrupteur entre le plug-in. Un exemple courant est une icône sociale. Ils vont commencer à une certaine position, mais quand la page, cliquez sur une balise, la balise <div> sera verrouillé dans une position, non pas avec le reste de la page scroll.

Si vous voulez faire référence à des caractéristiques individuelles de plug-in, vous devez référenceraffix.js.Ou, comme Bootstrap plug - in Présentation du chapitre mentionné, vous pouvez vous référer àbootstrap.jsou version compressée debootstrap.min.js.

usage

Vous pouvez attribuer des données, ou en utilisant supplémentaires JavaScript pour naviguer (affixe) plug-ins.

  • Grâce à des données attributs:Pour ajouter un élément supplémentaire à la navigation (Affix) comportement, seulement besoin d'ajouter l'élément que vous souhaitez surveiller lesdonnées-spy = "apposer"peut être. Utiliser offset pour définir l'élément de verrouillage et quand le commutateur mobile.

    Exemples

    L'exemple suivant illustre l'utilisation de la navigation supplémentaire (Affix) widget en données d'attributs d'utilisation:

    Exemples

    <! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Titre> Bootstrap navigation supplémentaire (Affix) le widget </ title> <Lien rel = "stylesheet" 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>
    / * Styles personnalisés * / ul .nav-onglets { largeur: 140 px ; Margin-top: 20 px ; Border-radius: 4 px ; Border: 1 px solide #DDD ; Box-ombre: 0 1 px 4 px rgba (0, 0, 0, 0,067) ;} -Onglets ul li { margin: 0 ; Border-top: 1 px solide #DDD ;} -Onglets ul li: first-child { border-top: aucun ;} -Onglets ul li un { margin: 0 ; Padding: 8 px 16 px ; Border-radius: 0 ;} -Onglets ul li .active a, .nav-onglets ul li .active a: hover { couleur: #fff ; Contexte: # 0088cc ; Border: 1 px solide # 0088cc ;} -Onglets ul li: first-child un { border-radius: 4 px 4 px 0 0 ;} -Onglets ul li: last-child un { border-radius: 0 0 4 px 4 px ;} -Onglets de la .affix ul { top: 30 px ; / * Définir la position supérieure de l' élément épinglé * / }
    </ Style> </ Head> <Body données-espion = "scroll" data-target = "#myScrollspy"> <Div class = "container"> <Div class = "jumbotron"> <H1> Bootstrap Affix </ h1 > </ Div> <Div class = "ligne"> <Div class = "col-xs-3 " id = "myScrollspy"> <Ul class = "nav nav-onglets nav -stacked" données-espion = "apposer" données offset top = "125 "> <Li class = "active"> <a href = "# section-1" > la première partie </ a> </ li> <Li> <a href = "# section-2" > La deuxième partie </ a> </ li> <Li> <a href = "# section-3" > Partie III </ a> </ li> <Li> <a href = "# section-4" > Partie IV </ a> </ li> <Li> <a href = "# section 5" > Partie V </ a> </ li> </ Ul> </ Div> <Div class = "col-xs-9 "> <H2 id = "section-1"> la première partie </ h2> <P> Lorem ipsum dolor sit amet , consectetur adipiscing elit. Nam eu sem tempor, varius quam à, luctus dui. Mauris magna metus, dapibus nca turpis vel, semper Malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. en tincidunt orci sit amet elementum vestibulum. Vivamus fermentum en arcu dans aliquam. Quisque aliquam porta odio en fringilla. Vivamus leo nisl, blandit au bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum porttitor neque. Integer ligula faucibus. < / p> <P> Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam à mattis. Potenti Suspendisse. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit à lacus blandit , commodo iaculis justo viverra. Etiam vitae is arcu. Mauris vel congue dolor. aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Mécène mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. < / p> <Hr> <H2 id "section 2" => La seconde section </ h2> <P> Nullam hendrerit justo non leo aliquet imperdiet. Etiam dans sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. Dans dapibus velit blandit pharetra tincidunt. Quisque non sapien nca lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. sed fringilla vitae lacus à rutrum. Phasellus congue vestibulum ligula de consequat sed. </ p> <P> Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis Malesuada à, pellentesque vitae orci. Vivamus elementum, Felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed à facilisis libero. Cum sociis natoque penatibus et magnis dis parturiente montes, nascetur ridiculus Mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nibh nca dans, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien dans, mollis ornare augue. </ p > <Hr> <H2 id "section 3" => Partie III </ h2> <P> Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit dans nca ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem Malesuada condimentum. Etiam dans aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue dans porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sapien sed à purus lacinia porttitor. Nullam iaculis, felis un pretium ornare, dolor nisl sempre tortor, vel sagittis lacus is consequat 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 TEMPOR egestas. Duis luctus Turpis à accumsan tincidunt. Phasellus risus risus, 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 ut dolor enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, potenti ac viverra est. Suspendisse. Integer pellentesque neque et tempus elementum. Curabitur de bibendum dans ligula ut rhoncus. </ p> <P> Quisque pharetra velit id velit iaculis pretium. Nullam un justo sed ligula porta sempre eu quis enim. Pellentesque pellentesque, metus à facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nca ante mollis tempus. Morbi vel accumsan diam, eget potenti convallis tellus. Suspendisse. </ p> <Hr> <H2 id "section 4" => Partie IV </ h2> <P> Suspendisse un orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum un iaculis lacus. Phasellus vitae convallis ligula, nca volutpat tellus. Vivamus scelerisque mollis nisl, nca vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Mécène quis sapien ut leo fringilla tempor 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 convallis nca dui, sit amet fermentum sapien auctor . Vestibulum ante ipsum primis dans faucibus orci luctus et ultrices posuere cubilia Curae ;. Sed eu elementum nibh, quis varius libero </ p> <P> Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam à mattis. Potenti Suspendisse. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit à lacus blandit , commodo iaculis justo viverra. Etiam vitae is arcu. Mauris vel congue dolor. aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Mécène mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. < / p> <P> Phasellus fermentum, s'asseoir neque amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc erat ornare quis faucibus molestie. Proin Malesuada consequat commodo. Mauris iaculis, eros ut dapibus luctus, massa enim elementum purus, assis amet tristique purus purus nca felis. Morbi vestibulum sapien eget porta pulvinar. Nam à quam diam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et ultrices risus felis dans orci. Quisque vestibulum sem nisl, vel congue leo dictum nca. Cras eget Est à velit sagittis ullamcorper vel et lectus. Dans 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 à felis. Curabitur ac tempus nulla, erat sempre ut. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id. </ p> <P> Ut ut risus nisl. Fusce porttitor eros au magna luctus, non eleifend congue nulla. Porttitor Aenean feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, une gravida commodo de turpis. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, eu Malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia congue quam. Nulla sem sem, aliquam nca dolor ac, tempus convallis nunc. interdum et Malesuada fames ac ante ipsum primis dans 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 pellentesque. Fusce eu suscipit massa. </ p> <Hr> <H2 id "section 5" => Partie V </ h2> <P> Nam eget purus nca is consectetur vehicula. Nullam ultrices risus nisl, en viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar Malesuada. Vestibulum sit amet is mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat 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 risus pretium nca. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Mécène ullamcorper, turpis fringilla pellentesque suscipit, massa lacus pulvinar mi , nca dignissim velit arcu eget purus. Nam à dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo un nibh ornare, eu congue neque rutrum. </ p> <P> Suspendisse un orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum un iaculis lacus. Phasellus vitae convallis ligula, nca volutpat tellus. Vivamus scelerisque mollis nisl, nca vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Mécène quis sapien ut leo fringilla tempor 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 convallis nca dui, sit amet fermentum sapien auctor . Vestibulum ante ipsum primis dans faucibus orci luctus et ultrices posuere cubilia Curae ;. Sed eu elementum nibh, quis varius libero </ p> <P> Morbi sed ipsum fermentum. Morbi un orci vulputate tortor ornare blandit un quis orci. Donec aliquam sodales gravida. En ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. Dans tincidunt vel leo eget pulvinar. Curabitur un eros non lacus aliquam de Malesuada. Praesent et tempus odio. Integer un nunc de quam. Dans hac habitasse platea dictumst. aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna . Sed un arcu semper, ut dignissim leo. </ p> <P> Sed lobortis vitae diam, id molestie magna. Aliquam consequat ipsum Quis est dictum ultrices. Aenean nibh velit, fringilla en diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper . Dans condimentum, est a faucibus luctus, mi mi dolor de cursus, id vehicula arcu risus un nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet. </ p> </ Div> </ Div> </ Div> </ Body> </ Html>

    Essayez »

    Les résultats sont les suivants:

    Navigation additionnelle (Affix) fiche des propriétés de données
  • Par JavaScript: Vous pouvez ajouter un élément JavaScript navigation ajoutés manuellement (Affix), comme suit:
    $ ( '# MyAffix'). Affix ({
       offset: {
    	  top: 100, en bas: function () {
    		 retour (this.bottom = 
    			$ ( '. Bs-footer'). OuterHeight (true))
    		 }
    	  }
    })
    

    Exemples

    L'exemple suivant illustre l'utilisation de la navigation supplémentaire (Affix) un widget via l'utilisation JavaScript:

    Exemples

    <! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Titre> Bootstrap navigation supplémentaire (Affix) le widget </ title> <Lien rel = "stylesheet" 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>
    / * Styles personnalisés * / ul .nav-onglets { largeur: 140 px ; Margin-top: 20 px ; Border-radius: 4 px ; Border: 1 px solide #DDD ; Box-ombre: 0 1 px 4 px rgba (0, 0, 0, 0,067) ;} -Onglets ul li { margin: 0 ; Border-top: 1 px solide #DDD ;} -Onglets ul li: first-child { border-top: aucun ;} -Onglets ul li un { margin: 0 ; Padding: 8 px 16 px ; Border-radius: 0 ;} -Onglets ul li .active a, .nav-onglets ul li .active a: hover { couleur: #fff ; Contexte: # 0088cc ; Border: 1 px solide # 0088cc ;} -Onglets ul li: first-child un { border-radius: 4 px 4 px 0 0 ;} -Onglets ul li: last-child un { border-radius: 0 0 4 px 4 px ;} -Onglets de la .affix ul { top: 30 px ; / * Définir la position supérieure de l' élément épinglé * / }
    </ Style> <Script>
    $ (Document). Prêt (fonction () {$ ( "#myNav"). Affix ({ offset: { top: 125 } });});
    </ Script> </ Head> <Body données-espion = "scroll" data-target = "#myScrollspy"> <Div class = "container"> <Div class = "jumbotron"> <H1> Bootstrap Affix </ h1 > </ Div> <Div class = "ligne"> <Div class = "col-xs-3 " id = "myScrollspy"> <Ul class = "nav nav-onglets nav -stacked" id = "MyNav"> <Li class = "active"> <a href = "# section-1" > la première partie </ a> </ li> <Li> <a href = "# section-2" > La deuxième partie </ a> </ li> <Li> <a href = "# section-3" > Partie III </ a> </ li> <Li> <a href = "# section-4" > Partie IV </ a> </ li> <Li> <a href = "# section 5" > Partie V </ a> </ li> </ Ul> </ Div> <Div class = "col-xs-9 "> <H2 id = "section-1"> la première partie </ h2> <P> Lorem ipsum dolor sit amet , consectetur adipiscing elit. Nam eu sem tempor, varius quam à, luctus dui. Mauris magna metus, dapibus nca turpis vel, semper Malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. en tincidunt orci sit amet elementum vestibulum. Vivamus fermentum en arcu dans aliquam. Quisque aliquam porta odio en fringilla. Vivamus leo nisl, blandit au bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum porttitor neque. Integer ligula faucibus. < / p> <P> Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam à mattis. Potenti Suspendisse. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit à lacus blandit , commodo iaculis justo viverra. Etiam vitae is arcu. Mauris vel congue dolor. aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Mécène mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. < / p> <Hr> <H2 id "section 2" => La seconde section </ h2> <P> Nullam hendrerit justo non leo aliquet imperdiet. Etiam dans sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. Dans dapibus velit blandit pharetra tincidunt. Quisque non sapien nca lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. sed fringilla vitae lacus à rutrum. Phasellus congue vestibulum ligula de consequat sed. </ p> <P> Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis Malesuada à, pellentesque vitae orci. Vivamus elementum, Felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed à facilisis libero. Cum sociis natoque penatibus et magnis dis parturiente montes, nascetur ridiculus Mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nibh nca dans, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien dans, mollis ornare augue. </ p > <Hr> <H2 id "section 3" => Partie III </ h2> <P> Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit dans nca ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem Malesuada condimentum. Etiam dans aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue dans porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sapien sed à purus lacinia porttitor. Nullam iaculis, felis un pretium ornare, dolor nisl sempre tortor, vel sagittis lacus is consequat 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 TEMPOR egestas. Duis luctus Turpis à accumsan tincidunt. Phasellus risus risus, 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 ut dolor enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, potenti ac viverra est. Suspendisse. Integer pellentesque neque et tempus elementum. Curabitur de bibendum dans ligula ut rhoncus. </ p> <P> Quisque pharetra velit id velit iaculis pretium. Nullam un justo sed ligula porta sempre eu quis enim. Pellentesque pellentesque, metus à facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nca ante mollis tempus. Morbi vel accumsan diam, eget potenti convallis tellus. Suspendisse. </ p> <Hr> <H2 id "section 4" => Partie IV </ h2> <P> Suspendisse un orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum un iaculis lacus. Phasellus vitae convallis ligula, nca volutpat tellus. Vivamus scelerisque mollis nisl, nca vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Mécène quis sapien ut leo fringilla tempor 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 convallis nca dui, sit amet fermentum sapien auctor . Vestibulum ante ipsum primis dans faucibus orci luctus et ultrices posuere cubilia Curae ;. Sed eu elementum nibh, quis varius libero </ p> <P> Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam à mattis. Potenti Suspendisse. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit à lacus blandit , commodo iaculis justo viverra. Etiam vitae is arcu. Mauris vel congue dolor. aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Mécène mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. < / p> <P> Phasellus fermentum, s'asseoir neque amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc erat ornare quis faucibus molestie. Proin Malesuada consequat commodo. Mauris iaculis, eros ut dapibus luctus, massa enim elementum purus, assis amet tristique purus purus nca felis. Morbi vestibulum sapien eget porta pulvinar. Nam à quam diam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et ultrices risus felis dans orci. Quisque vestibulum sem nisl, vel congue leo dictum nca. Cras eget Est à velit sagittis ullamcorper vel et lectus. Dans 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 à felis. Curabitur ac tempus nulla, erat sempre ut. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id. </ p> <P> Ut ut risus nisl. Fusce porttitor eros au magna luctus, non eleifend congue nulla. Porttitor Aenean feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, une gravida commodo de turpis. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, eu Malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia congue quam. Nulla sem sem, aliquam nca dolor ac, tempus convallis nunc. interdum et Malesuada fames ac ante ipsum primis dans 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 pellentesque. Fusce eu suscipit massa. </ p> <Hr> <H2 id "section 5" => Partie V </ h2> <P> Nam eget purus nca is consectetur vehicula. Nullam ultrices risus nisl, en viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar Malesuada. Vestibulum sit amet is mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat 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 risus pretium nca. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Mécène ullamcorper, turpis fringilla pellentesque suscipit, massa lacus pulvinar mi , nca dignissim velit arcu eget purus. Nam à dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo un nibh ornare, eu congue neque rutrum. </ p> <P> Suspendisse un orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum un iaculis lacus. Phasellus vitae convallis ligula, nca volutpat tellus. Vivamus scelerisque mollis nisl, nca vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Mécène quis sapien ut leo fringilla tempor 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 convallis nca dui, sit amet fermentum sapien auctor . Vestibulum ante ipsum primis dans faucibus orci luctus et ultrices posuere cubilia Curae ;. Sed eu elementum nibh, quis varius libero </ p> <P> Morbi sed ipsum fermentum. Morbi un orci vulputate tortor ornare blandit un quis orci. Donec aliquam sodales gravida. En ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. Dans tincidunt vel leo eget pulvinar. Curabitur un eros non lacus aliquam de Malesuada. Praesent et tempus odio. Integer un nunc de quam. Dans hac habitasse platea dictumst. aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna . Sed un arcu semper, ut dignissim leo. </ p> <P> Sed lobortis vitae diam, id molestie magna. Aliquam consequat ipsum Quis est dictum ultrices. Aenean nibh velit, fringilla en diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper . Dans condimentum, est a faucibus luctus, mi mi dolor de cursus, id vehicula arcu risus un nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet. </ p> </ Div> </ Div> </ Div> </ Body> </ Html>

    Essayez »

    Les résultats sont les suivants:

    Navigation additionnelle (Affix) plug-in Javascript

Par le positionnement CSS

Dans les deux au-dessus de la navigation supplémentaire (Affix) en mode plug-in, vous devez passer par le contenu de positionnement CSS. Navigation additionnelle (Affix) plug-in de commutation entre les trois classes, chaque classe ont montré unétat particulier:.affix, .affix-hautet .affix-bas.Suivez ces étapes pour configurer votre propre CSS pour ces trois états (ne comptez pas sur ce plugin).

  • Au début, ajoutez l'élémentplug-.affix-dessus pour indiquer dans sa position la plus haute.Cette fois-ci ne nécessite aucun positionnement CSS.
  • Lorsque vous faites défiler l'ajout de navigation supplémentaires (affixe) éléments, elle devrait déclencher la navigation réelle supplémentaire (Affix). À ce stade.affix remplacera .affix-dessus,et laposition set: fixe; (fournipar Bootstrap code CSS).
  • Si vous définissez le fond de l'offset, lorsque le défilement pour atteindre cette position devrait.affix remplacé .affix-bas.Étant donné que le décalage est facultative, si vous définissez le décalage est nécessaire en même temps définir la CSS appropriée. Dans ce cas, ajouter laposition si nécessaire: absolue ;.

options de

Il y a quelques options à travers les attributs de données ou JavaScript pour passer. Le tableau suivant présente les options suivantes:

选项名称类型/默认值Data 属性名称描述
offsetnumber | function | object
默认值:10
data-offset当计算滚动位置时,距离顶部的偏移像素。如果设置了一个数字,则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移,则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移,请使用函数。