Latest web development tutorials

Bootstrap navigazione ulteriore widget di (Affix)

Ulteriori plug-in di navigazione (Affix) permette un <div> fissato in una certa posizione nella pagina. È inoltre possibile attivare o disattivare tramite un interruttore tra il plug-in. Un esempio comune è un'icona sociale. Inizieranno in una certa posizione, ma quando la pagina fare clic su un tag, il <div> verrà bloccato in una posizione, non con il resto della pagina di scorrimento.

Se si vuole fare riferimento alle singole funzioni di plug-in, è necessario fare riferimentoaffix.js.O, come Bootstrap plug Panoramica capitolo citato, è possibile fare riferimento abootstrap.jso versione compressa delbootstrap.min.js.

uso

È possibile attribuire i dati, o utilizzando ulteriore JavaScript per navigare (Applicare) plug-in.

  • Attraverso gli attributi dei dati: Per aggiungere un ulteriore elemento per la navigazione (Affix) comportamento, solo bisogno di aggiungere l'elemento che si desidera monitorare i dati-spia = "apporre"può essere. Utilizzare Offset per definire l'elemento di bloccaggio e quando passare mobile.

    Esempi

    L'esempio seguente dimostra l'uso di ulteriore widget di navigazione (Affix) dai dati attributo di utilizzo:

    Esempi

    <! DOCTYPE html> <HTML> <Head> <Meta charset = "UTF-8"> <Title> Bootstrap navigazione aggiuntiva (Affix) widget di </ title> <link 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>
    / * Stili personalizzati * / ul .nav-tabs { larghezza: 140 px ; Margin-top: 20 px ; Border-radius: 4 px ; Border: 1 px solido #ddd ; Box-shadow: 0 1 px 4 px RGBA (0, 0, 0, 0,067) ;} ul-.nav schede li { margin: 0 ; Border-top: 1 px solido #ddd ;} ul-.nav schede li: first-child { border-top: nessuno ;} ul-.nav schede Li un { margin: 0 ; Imbottitura: 8 px 16 px ; Border-radius: 0 ;} ul-.nav schede Li .active a, ul .nav-tabs Li .active a: hover { colore: #fff ; Background: # 0088cc ; Border: 1 px solido # 0088cc ;} ul-.nav schede li: first-child un { border-radius: 4 px 4 px 0 0 ;} ul-.nav schede li: last-child un { border-radius: 0 0 4 px 4 px ;} ul-.nav schede .affix { top: 30 px ; / * Impostare la posizione superiore del elemento appuntato * / }
    </ Style> </ Head> <Body Dati-spia = "scroll" Dati-target = "#myScrollspy"> <div class = "contenitore"> <div class = "Jumbotron"> <H1> Bootstrap Fissare </ h1 > </ Div> <div class = "riga"> <div class = "Col-xs-3 " id = "myScrollspy"> <ul class = "nav nav-schede nav -stacked" Dati-spia = "apporre" dati-offset-top = "125 "> <Li class = "attiva"> <a href = "# sezione-1" > la prima parte </ a> </ li> <LI> <a href = "# sezione-2" > La seconda parte </ a> </ li> <LI> <a href = "# sezione-3" > Parte III </ a> </ li> <LI> <a href = "# sezione-4" > Parte IV </ a> </ li> <LI> <a href = "# sezione-5" > Parte V </ a> </ li> </ Ul> </ Div> <div class = "Col-XS-9 "> <H2 id = "sezione-1"> la prima parte </ h2> <P> Lorem ipsum dolor sit amet , consectetur adipiscing elit. Nam eu sem tempor, varius quam a, luctus dui. Mauris magna metus, dapibus nca turpis vel, sempre malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non Purus. Suspendisse Varius nibh non aliquet sagittis. in tincidunt Orci sit amet elementum vestibolo. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in Fringilla. Vivamus leo nisl, blandit a 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 a Mattis. Potenti Suspendisse. Aliquam sit amet Gravida nibh, facilisis gravida odio. Phasellus auctor velit a lacus blandit , COMMODO iaculis justo viverra. 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. < / p> <Hr> <H2 id = "section-2"> La seconda sezione </ h2> <P> Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapiens nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. sed vitae fringilla Lacus a rutrum. Phasellus congue vestibolo ligula consequat sed. </ p> <P> Vestibulum consectetur scelerisque lacus, ac fermentum lorem Convallis sed. Nam odio tortor, dictum quis malesuada a, Pellentesque orci vitae. Vivamus elementum, Felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed a facilisis libero. Cum sociis natoque penatibus et magnis dis partoriente 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. </ p > <Hr> <H2 id = "section-3"> Parte III </ h2> <P> Intero pulvinar leo id risus Pellentesque vestibolo. Sed diam libero, sodales Eget Sapien vel, porttitor Bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ca sem malesuada condimentum. Etiam in aliquam Lectus. Nam vel Sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet Mattis augue in porttitor. Quisque Tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor Fringilla blandit. Ut sed sapiens a Purus Lacinia porttitor. Nullam iaculis, felis un Pretium ornare, dolor nisl sempre tortor, vel sagittis lacus est 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 egestas TEMPOR. Duis luctus turpis a 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 , sempre ipsum. Duis sed dolor ut 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 Elementum tempus. Curabitur Bibendum in 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 a facilisis hendrerit, lectus velit facilisis leo, quis Volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nec. ante tempus Mollis Morbi vel accumsan diam, Eget potenti Convallis tellus. Suspendisse. </ p> <Hr> <H2 id = "sezione-4"> Parte IV </ h2> <P> Suspendisse un orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum un iaculis lacus. Phasellus vitae Convallis ligula, nec Volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi Gravida, faucibus Convallis neque Pretium. Mecenate quis sapiens 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 in faucibus Orci luctus et ultrices Inchiesta 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 a Mattis. Potenti Suspendisse. Aliquam sit amet Gravida nibh, facilisis gravida odio. Phasellus auctor velit a lacus blandit , COMMODO iaculis justo viverra. 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. < / p> <P> Phasellus fermentum, neque sedersi 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, seduti amet tristique Purus purus nec felis. Morbi vestibolo sapiens eget Porta pulvinar. Nam a quam diam. Proin rhoncus, felis Elementum accumsan dictum, felis nisi vestibolo tellus, et ultrices Risus felis in orci. Quisque vestibolo sem nisl, vel congue leo dictum nca. Cras Eget est a velit sagittis ullamcorper vel et lectus. In hac dictumst habitasse platea. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendrerit urna, faucibus rhoncus Massa nibh a felis. Curabitur ac tempus nulla, ut erat sempre. Vivamus porta ullamcorper sem, ornare egestas Mauris facilisis id. </ p> <P> Ut ut risus nisl. Fusce porttitor eros a magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus Commodo, una gravida Commodo 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 in faucibus. Nulla suscipit Convallis iaculis. Quisque eget ligula Commodo. 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 = "sezione-5"> Parte V </ h2> <P> Nam eget purus nec est consectetur vehicula. Nullam ultrices risus 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 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 nec. 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. Mecenate ullamcorper, turpis suscipit fringilla Pellentesque, Massa lacus pulvinar mi , nec dignissim velit arcu eget Purus. Nam a 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, nec Volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi Gravida, faucibus Convallis neque Pretium. Mecenate quis sapiens 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 in faucibus Orci luctus et ultrices Inchiesta cubilia Curae ;. Sed eu elementum nibh, quis Varius Libero </ p> <P> Morbi sed fermentum ipsum. Morbi un Orci vulputate tortor ornare blandit un quis orci. Donec aliquam sodales gravida. In ut ullamcorper nisi, ac Pretium velit. Vestibulum vitae lectus Volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt vel leo eget pulvinar. Curabitur un eros non lacus aliquam malesuada. Praesent et tempus odio. Integer un nunc quam. In hac dictumst habitasse platea. aliquam porta nibh nulla, et Mattis turpis placerat eget. Pellentesque dui diam, Pellentesque vel Gravida id, accumsan eu magna . Sed un arcu sempre, ut dignissim leo. </ p> <P> sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum Quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Erat Aliquam Volutpat. Vivamus lobortis urna quis gravida sempre . In condimentum, est un faucibus luctus, mi mi dolor Cursus, id vehicula Arcu risus un nibh. Pellentesque blandit Sapien lacus, vel vehicula nunc feugiat sit amet. </ p> </ Div> </ Div> </ Div> </ Corpo> </ Html>

    Prova »

    I risultati sono i seguenti:

    Navigazione ausiliaria (Affix) spina proprietà dei dati

  • In JavaScript: è possibile aggiungere un elemento JavaScript navigazione aggiunto manualmente (Fissare), come segue:
    $ ( '# MyAffix'). Affix ({
   offset: {
	  top: 100, in basso: function () {
		 ritorno (this.bottom = 
			$ ( '. Bs-footer'). OuterHeight (true))
		 }
	  }
})

    Esempi

    L'esempio seguente dimostra l'uso di ulteriore widget di navigazione (Affix) tramite l'utilizzo JavaScript:

    Esempi

    <! DOCTYPE html> <HTML> <Head> <Meta charset = "UTF-8"> <Title> Bootstrap navigazione aggiuntiva (Affix) widget di </ title> <link 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>
    / * Stili personalizzati * / ul .nav-tabs { larghezza: 140 px ; Margin-top: 20 px ; Border-radius: 4 px ; Border: 1 px solido #ddd ; Box-shadow: 0 1 px 4 px RGBA (0, 0, 0, 0,067) ;} ul-.nav schede li { margin: 0 ; Border-top: 1 px solido #ddd ;} ul-.nav schede li: first-child { border-top: nessuno ;} ul-.nav schede Li un { margin: 0 ; Imbottitura: 8 px 16 px ; Border-radius: 0 ;} ul-.nav schede Li .active a, ul .nav-tabs Li .active a: hover { colore: #fff ; Background: # 0088cc ; Border: 1 px solido # 0088cc ;} ul-.nav schede li: first-child un { border-radius: 4 px 4 px 0 0 ;} ul-.nav schede li: last-child un { border-radius: 0 0 4 px 4 px ;} ul-.nav schede .affix { top: 30 px ; / * Impostare la posizione superiore del elemento appuntato * / }
    </ Style> <Script>
    $ (Document). Ready (funzione () {$ ( "#myNav"). Affix ({ offset: { top: 125 } });});
    </ Script> </ Head> <Body Dati-spia = "scroll" Dati-target = "#myScrollspy"> <div class = "contenitore"> <div class = "Jumbotron"> <H1> Bootstrap Fissare </ h1 > </ Div> <div class = "riga"> <div class = "Col-xs-3 " id = "myScrollspy"> <ul class = "nav nav-schede nav -stacked" id = "MyNav"> <Li class = "attiva"> <a href = "# sezione-1" > la prima parte </ a> </ li> <LI> <a href = "# sezione-2" > La seconda parte </ a> </ li> <LI> <a href = "# sezione-3" > Parte III </ a> </ li> <LI> <a href = "# sezione-4" > Parte IV </ a> </ li> <LI> <a href = "# sezione-5" > Parte V </ a> </ li> </ Ul> </ Div> <div class = "Col-XS-9 "> <H2 id = "sezione-1"> la prima parte </ h2> <P> Lorem ipsum dolor sit amet , consectetur adipiscing elit. Nam eu sem tempor, varius quam a, luctus dui. Mauris magna metus, dapibus nca turpis vel, sempre malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non Purus. Suspendisse Varius nibh non aliquet sagittis. in tincidunt Orci sit amet elementum vestibolo. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in Fringilla. Vivamus leo nisl, blandit a 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 a Mattis. Potenti Suspendisse. Aliquam sit amet Gravida nibh, facilisis gravida odio. Phasellus auctor velit a lacus blandit , COMMODO iaculis justo viverra. 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. < / p> <Hr> <H2 id = "section-2"> La seconda sezione </ h2> <P> Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapiens nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. sed vitae fringilla Lacus a rutrum. Phasellus congue vestibolo ligula consequat sed. </ p> <P> Vestibulum consectetur scelerisque lacus, ac fermentum lorem Convallis sed. Nam odio tortor, dictum quis malesuada a, Pellentesque orci vitae. Vivamus elementum, Felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed a facilisis libero. Cum sociis natoque penatibus et magnis dis partoriente 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. </ p > <Hr> <H2 id = "section-3"> Parte III </ h2> <P> Intero pulvinar leo id risus Pellentesque vestibolo. Sed diam libero, sodales Eget Sapien vel, porttitor Bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ca sem malesuada condimentum. Etiam in aliquam Lectus. Nam vel Sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet Mattis augue in porttitor. Quisque Tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor Fringilla blandit. Ut sed sapiens a Purus Lacinia porttitor. Nullam iaculis, felis un Pretium ornare, dolor nisl sempre tortor, vel sagittis lacus est 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 egestas TEMPOR. Duis luctus turpis a 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 , sempre ipsum. Duis sed dolor ut 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 Elementum tempus. Curabitur Bibendum in 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 a facilisis hendrerit, lectus velit facilisis leo, quis Volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nec. ante tempus Mollis Morbi vel accumsan diam, Eget potenti Convallis tellus. Suspendisse. </ p> <Hr> <H2 id = "sezione-4"> Parte IV </ h2> <P> Suspendisse un orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum un iaculis lacus. Phasellus vitae Convallis ligula, nec Volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi Gravida, faucibus Convallis neque Pretium. Mecenate quis sapiens 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 in faucibus Orci luctus et ultrices Inchiesta 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 a Mattis. Potenti Suspendisse. Aliquam sit amet Gravida nibh, facilisis gravida odio. Phasellus auctor velit a lacus blandit , COMMODO iaculis justo viverra. 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. < / p> <P> Phasellus fermentum, neque sedersi 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, seduti amet tristique Purus purus nec felis. Morbi vestibolo sapiens eget Porta pulvinar. Nam a quam diam. Proin rhoncus, felis Elementum accumsan dictum, felis nisi vestibolo tellus, et ultrices Risus felis in orci. Quisque vestibolo sem nisl, vel congue leo dictum nca. Cras Eget est a velit sagittis ullamcorper vel et lectus. In hac dictumst habitasse platea. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendrerit urna, faucibus rhoncus Massa nibh a felis. Curabitur ac tempus nulla, ut erat sempre. Vivamus porta ullamcorper sem, ornare egestas Mauris facilisis id. </ p> <P> Ut ut risus nisl. Fusce porttitor eros a magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus Commodo, una gravida Commodo 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 in faucibus. Nulla suscipit Convallis iaculis. Quisque eget ligula Commodo. 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 = "sezione-5"> Parte V </ h2> <P> Nam eget purus nec est consectetur vehicula. Nullam ultrices risus 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 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 nec. 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. Mecenate ullamcorper, turpis suscipit fringilla Pellentesque, Massa lacus pulvinar mi , nec dignissim velit arcu eget Purus. Nam a 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, nec Volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi Gravida, faucibus Convallis neque Pretium. Mecenate quis sapiens 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 in faucibus Orci luctus et ultrices Inchiesta cubilia Curae ;. Sed eu elementum nibh, quis Varius Libero </ p> <P> Morbi sed fermentum ipsum. Morbi un Orci vulputate tortor ornare blandit un quis orci. Donec aliquam sodales gravida. In ut ullamcorper nisi, ac Pretium velit. Vestibulum vitae lectus Volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt vel leo eget pulvinar. Curabitur un eros non lacus aliquam malesuada. Praesent et tempus odio. Integer un nunc quam. In hac dictumst habitasse platea. aliquam porta nibh nulla, et Mattis turpis placerat eget. Pellentesque dui diam, Pellentesque vel Gravida id, accumsan eu magna . Sed un arcu sempre, ut dignissim leo. </ p> <P> sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum Quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Erat Aliquam Volutpat. Vivamus lobortis urna quis gravida sempre . In condimentum, est un faucibus luctus, mi mi dolor Cursus, id vehicula Arcu risus un nibh. Pellentesque blandit Sapien lacus, vel vehicula nunc feugiat sit amet. </ p> </ Div> </ Div> </ Div> </ Corpo> </ Html>

    Prova »

    I risultati sono i seguenti:

    Navigazione ausiliaria (Affix) plug-in Javascript

Posizionando CSS

In due precedenti con la navigazione aggiuntiva (Affix) in modalità plug-in, si deve passare attraverso i contenuti posizionamento CSS. Navigazione ausiliaria (Affix) plug-in di commutazione tra le tre classi, ogni classe hanno mostrato un particolarestato:.affix, .affix-tope .affix-basso.Seguire questa procedura per impostare il proprio CSS per questi tre stati (non fare affidamento su questo plugin).

  • All'inizio, aggiungere l'elemento diplug-.affix-top per indicare nella sua posizione più alta.Questa volta non richiede alcun posizionamento CSS.
  • Durante lo scorrimento attraverso l'aggiunta di elementi di navigazione aggiuntiva (Applicare), dovrebbe far scattare la navigazione aggiuntiva reale (Affix). A questo punto.affix sostituirà .affix-top,e laposizione impostare: fixed; (fornitadal codice CSS Bootstrap).
  • Se si definisce la parte inferiore della compensazione, quando il rotolo di raggiungere questa posizione dovrebbe.affix sostituito .affix-basso.Dal momento che l'offset è opzionale, se si imposta la si richiede allo stesso tempo impostare l'appropriata CSS offset. In questo caso, aggiungere laposizione in caso di necessità: assoluta ;.

Opzioni

Ci sono alcune opzioni tramite attributi di dati o JavaScript per passare. La seguente tabella elenca le seguenti opzioni:

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