Latest web development tutorials

Bootstrap nawigacji (dodatkowa) umieszcza widget

Dodatkowe nawigacji (Nakleić) plug-in pozwala na <div> ustalona na pewnej pozycji na stronie. Można także włączyć lub wyłączyć za pomocą przełącznika między plug-in. Typowym przykładem jest ikoną społecznej. zaczną się w określonej pozycji, a przy kliknięcie strony na znaczniku <div> zostanie zablokowany w położeniu, a nie w pozostałej części zwoju strony.

Jeśli chcesz zapoznać się z poszczególnymi funkcjami typu plug-in, trzeba odwołaćaffix.js.Albo, jak Bootstrap Przegląd wtyczki rozdziale wspomniano, można zwrócić się dobootstrap.jslub skompresowanej wersjibootstrap.min.js.

zwyczaj

Można przypisywać danych lub za pomocą dodatkowego JavaScript, aby poruszać (umieszcza) wtyczek.

  • Poprzez dane atrybuty: Aby dodać dodatkowy element do nawigacji (umieszcza) zachowań, tylko trzeba dodać element, który chcesz monitorować dane-spy = "umieszcza"może być. Używać do określenia przesunięcia elementu blokującego, a kiedy przełącznik komórkowego.

    Przykłady

    Poniższy przykład demonstruje użycie dodatkowej nawigacji (Nakleić) przez widget danych Wykorzystanie atrybutu:

    Przykłady

    <! DOCTYPE html> <Html> <Head> <meta charset = "UTF-8"> <Title> bootstrapu dodatkową nawigację (Nakleić) widget </ 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>
    / * Style niestandardowe * / ul .nav-tabs { width: 140 px ; Margin-top: 20 px ; Border-radius: 4 px ; Granicznej: 1 px stały #ddd ; Box-shadow: 0 1 px 4 px rgba (0, 0, 0, 0,067) ;} UL .nav-tabs li { margin: 0 ; Border-top: 1 px stały #ddd ;} UL .nav-tabs li: first-child { border-top: żaden ;} UL .nav-tabs li a { margin: 0 ; Padding: 8 px 16 px ; Border-radius: 0 ;} UL .nav-tabs li .active A, ul .nav-tabs li .active : hover { kolor: #fff ; Tło: # 0088cc ; Granicznej: 1 px stały # 0088cc ;} UL .nav-tabs li: first-child a { border-radius: 4 px 4 px 0 0 ;} UL .nav-tabs li: last-child a { border-radius: 0 0 4 px 4 px ;} UL .nav-tabs .affix { top: 30 px ; / * Ustaw górną pozycję przypięty elementu * / }
    </ Style> </ Head> <body Dane-spy = "scroll" Dane-target = "#myScrollspy"> <div class = "container"> <div class = "jumbotron"> <H1> Bootstrap Nakleić </ h1 > </ Div> <div class = "wiersz"> <div class = "Col-XS-3 " id = "myScrollspy"> <ul class = "nav nav-tabs nav -stacked" Dane-spy = "umieścić" Dane-offset-top = "125 "> <Li class = "aktywny"> <a href = "# punkt-1" > pierwsza część </ a> </ li> <Li> <a href = "# punkt-2" > Druga część </ a> </ li> <Li> <a href = "# punkt-3" > Część III </ a> </ li> <Li> <a href = "# sekcja-4" > Część IV </ a> </ li> <Li> <a href = "# punkt-5" > Część V </ a> </ li> </ Ul> </ Div> <div class = "Col-xs-9 "> <h2 id = "punkt-1"> pierwsza część </ h2> <P> Lorem ipsum dolor sit amet , consectetur adipiscing elit. Nam eu sem tempor, Varius quam się, luctus DUI. Mauris magna metus, dapibus gdzie indziej niesklasyfikowane turpis Vel, semper malesuada ante. Vestibulum id Metus ac nisl bibendum scelerisque non non purus. Suspendisse Varius NIBH non aliquet sagittis. w tincidunt Orci sit amet Elementum Vestibulum. Vivamus fermentum w Arcu w aliquam. Quisque aliquam porta odio Fringilla. Vivamus nisl Leo, blandit w bibendum UE, tristique eget Risus. Integer aliquet quam ut Elit suscipit, iD interdum w neque porttitor. Integer faucibus ligula. < / p> <P> Vestibulum Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum Risus. Pellentesque Viverra sagittis quam na Mattis. Potenti Suspendisse. Aliquam sit amet gravida NIBH, facilisis gravida odio. Phasellus auctor velit na 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. mecenasem Mattis Lectus enim, Quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit Tellus. < / p> <Hr> <h2 id = "punkt-2"> Druga sekcja </ h2> <P> Nullam hendrerit Justo non leo aliquet imperdiet. Etiam w sagittis Lectus. Suspendisse ultrices placerat accumsan. Mauris Quis dapibus Orci. W 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 lacus Fringilla na rutrum. Phasellus congue Vestibulum ligula sed consequat. </ p> <P> Vestibulum consectetur scelerisque lacus, ac fermentum lorem Convallis sed. Nam odio tortor, dictum Quis malesuada się, Pellentesque vitae Orci. Vivamus Elementum, Felis ue auctor lobortis, średnica velit egestas Lacus, Quis fermentum metus ante Quis urna. Sed w facilisis libero. Cum sociis natoque penatibus et Magnis dis rodząca Montes, nascetur ridiculus muz. Vestibulum bibendum blandit dolor. Nunc Orci dolor, molestie NEC NIBH się, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapiens in, mollis ornare augue. </ p > <Hr> <h2 id = "punkt-3"> Część III </ h2> <P> Integer pulvinar leo id Risus Pellentesque Vestibulum. Sed średnica libero, sodales eget sapiens 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 w aliquam Lectus. Nam vel sapiens śr. Donec pharetra id Arcu eget blandit. Proin imperdiet Mattis augue w porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt Risus Quis dolor Fringilla blandit. Ut sed sapiens w purus Lacinia porttitor. Nullam iaculis, Felis 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 w 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 w ligula ut rhoncus. </ p> <P> Quisque pharetra velit id velit iaculis Pretium. Nullam się Justo sed ligula porta semper eu Quis enim. Pellentesque Pellentesque, Metusa w facilisis hendrerit, LECTUS velit facilisis Leo, Quis volutpat turpis Arcu Quis enim. Nulla Viverra lorem Elementum interdum ultricies. Suspendisse accumsan quam NEC ante mollis tempus. Morbi vel accumsan diam, Eget Convallis Tellus. Suspendisse Potenti. </ p> <Hr> <h2 id = "punkt-4"> Część IV </ h2> <P> Suspendisse Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum iaculis lacus. Phasellus vitae Convallis ligula, nec volutpat Tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mil gravida, faucibus Convallis neque Pretium. mecenasem Quis sapiens ut leo Fringilla tempor vitae sit amet Leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mil Pretium, fermentum lacus et, Viverra Tellus. Phasellus sodales libero Convallis NEC dui, sit amet fermentum sapiens auctor . Vestibulum ante ipsum PRIMIS w faucibus Orci luctus et ultrices Zapytanie 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 na Mattis. Potenti Suspendisse. Aliquam sit amet gravida NIBH, facilisis gravida odio. Phasellus auctor velit na 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. mecenasem Mattis Lectus enim, Quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit Tellus. < / p> <P> fermentum Phasellus, neque sit amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat Quis faucibus molestie. Proin malesuada consequat Commodo. Mauris iaculis eros ut dapibus luctus, Massa enim Elementum purus, siedzieć amet tristique purus purus NEC felis. Morbi Vestibulum sapiens eget porta pulvinar. Nam się quam śr. Proin rhoncus, Felis Elementum accumsan dictum, Felis nisi Vestibulum Tellus, et ultrices Risus felis w Orci. Quisque Vestibulum sem nisl, vel congue leo dictum, gdzie indziej niesklasyfikowane. Cras eget est w velit sagittis ullamcorper vel et Lectus. W HAC habitasse Platei 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 na felis. Curabitur ac tempus nulla, ut sempre erat. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id. </ p> <P> Ut ut Risus nisl. Fusce porttitor eros Magna luctus, nie congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et Risus Commodo, a 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 NEC dolor ac, tempus Convallis nunc. interdum et malesuada fames ac ante ipsum PRIMIS w faucibus. Nulla suscipit Convallis iaculis. Quisque eget Commodo ligula. Praesent leo dui, facilisis Quis eleifend się, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies Pellentesque. Fusce eu suscipit Massa. </ p> <Hr> <h2 id = "punkt-5"> Część V </ h2> <P> Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl Risus w 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 gdzie indziej niesklasyfikowane. 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. Mecenasem ullamcorper, turpis suscipit Pellentesque Fringilla, Massa lacus pulvinar mil , nec dignissim velit Arcu eget purus. Nam się dapibus Tellus, eget euismod nisl. Ut eget venenatis sapiens. Vivamus vulputate Varius mauris, vel Varius nisl facilisis ac. Nulla aliquet Justo NIBH ornare, eu congue neque rutrum. </ p> <P> Suspendisse Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum iaculis lacus. Phasellus vitae Convallis ligula, nec volutpat Tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mil gravida, faucibus Convallis neque Pretium. mecenasem Quis sapiens ut leo Fringilla tempor vitae sit amet Leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mil Pretium, fermentum lacus et, Viverra Tellus. Phasellus sodales libero Convallis NEC dui, sit amet fermentum sapiens auctor . Vestibulum ante ipsum PRIMIS w faucibus Orci luctus et ultrices Zapytanie cubilia Curae ;. Sed eu Elementum NIBH, Quis Varius libero </ p> <P> Morbi sed fermentum ipsum. Morbi Orci vulputate tortor ornare blandit Quis Orci. Donec aliquam sodales gravida. UT ullamcorper Nisi, ac Pretium velit. Vestibulum vitae Lectus volutpat, consequat lorem sit amet, pulvinar Tellus. W tincidunt vel leo eget pulvinar. Curabitur się eros non lacus malesuada aliquam. Praesent et tempus odio. liczba całkowita a nunc quam. W HAC habitasse Platei dictumst. aliquam porta NIBH nulla, et Mattis turpis placerat eget. Pellentesque dui diam, Pellentesque vel gravida id, accumsan ue magna . Sed 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 w śr 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 sempre . W condimentum, Est faucibus luctus, mI dolor Cursus mi, id vehicula Arcu Risus NIBH. Pellentesque blandit sapiens lacus, vel vehicula nunc feugiat sit amet. </ p> </ Div> </ Div> </ Div> </ Body> </ Html>

    Spróbuj »

    Wyniki przedstawiają się następująco:

    Dodatkowe nawigacji (Nakleić) plug Właściwości danych

  • Przez JavaScript: Można dodać element JavaScript dodane ręcznie nawigacji (Nakleić), w następujący sposób:
    $ ( '# MyAffix "). Nakleić ({
   offset: {
	  top: 100, na dole: function () {
		 return (this.bottom = 
			$ ( '. Śniadaniem-footer "). OuterHeight (true))
		 }
	  }
})

    Przykłady

    Poniższy przykład demonstruje użycie dodatkowej nawigacji (Nakleić) widget poprzez wykorzystanie javascript:

    Przykłady

    <! DOCTYPE html> <Html> <Head> <meta charset = "UTF-8"> <Title> bootstrapu dodatkową nawigację (Nakleić) widget </ 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>
    / * Style niestandardowe * / ul .nav-tabs { width: 140 px ; Margin-top: 20 px ; Border-radius: 4 px ; Granicznej: 1 px stały #ddd ; Box-shadow: 0 1 px 4 px rgba (0, 0, 0, 0,067) ;} UL .nav-tabs li { margin: 0 ; Border-top: 1 px stały #ddd ;} UL .nav-tabs li: first-child { border-top: żaden ;} UL .nav-tabs li a { margin: 0 ; Padding: 8 px 16 px ; Border-radius: 0 ;} UL .nav-tabs li .active A, ul .nav-tabs li .active : hover { kolor: #fff ; Tło: # 0088cc ; Granicznej: 1 px stały # 0088cc ;} UL .nav-tabs li: first-child a { border-radius: 4 px 4 px 0 0 ;} UL .nav-tabs li: last-child a { border-radius: 0 0 4 px 4 px ;} UL .nav-tabs .affix { top: 30 px ; / * Ustaw górną pozycję przypięty elementu * / }
    </ Style> <Script>
    $ (Document). Gotowy (function () {$ ( "#myNav"). Nakleić ({ offset: { top: 125 } });});
    </ Script> </ Head> <body Dane-spy = "scroll" Dane-target = "#myScrollspy"> <div class = "container"> <div class = "jumbotron"> <H1> Bootstrap Nakleić </ h1 > </ Div> <div class = "wiersz"> <div class = "Col-XS-3 " id = "myScrollspy"> <ul class = "nav nav-tabs nav -stacked" id = "myNav"> <Li class = "aktywny"> <a href = "# punkt-1" > pierwsza część </ a> </ li> <Li> <a href = "# punkt-2" > Druga część </ a> </ li> <Li> <a href = "# punkt-3" > Część III </ a> </ li> <Li> <a href = "# sekcja-4" > Część IV </ a> </ li> <Li> <a href = "# punkt-5" > Część V </ a> </ li> </ Ul> </ Div> <div class = "Col-xs-9 "> <h2 id = "punkt-1"> pierwsza część </ h2> <P> Lorem ipsum dolor sit amet , consectetur adipiscing elit. Nam eu sem tempor, Varius quam się, luctus DUI. Mauris magna metus, dapibus gdzie indziej niesklasyfikowane turpis Vel, semper malesuada ante. Vestibulum id Metus ac nisl bibendum scelerisque non non purus. Suspendisse Varius NIBH non aliquet sagittis. w tincidunt Orci sit amet Elementum Vestibulum. Vivamus fermentum w Arcu w aliquam. Quisque aliquam porta odio Fringilla. Vivamus nisl Leo, blandit w bibendum UE, tristique eget Risus. Integer aliquet quam ut Elit suscipit, iD interdum w neque porttitor. Integer faucibus ligula. < / p> <P> Vestibulum Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum Risus. Pellentesque Viverra sagittis quam na Mattis. Potenti Suspendisse. Aliquam sit amet gravida NIBH, facilisis gravida odio. Phasellus auctor velit na 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. mecenasem Mattis Lectus enim, Quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit Tellus. < / p> <Hr> <h2 id = "punkt-2"> Druga sekcja </ h2> <P> Nullam hendrerit Justo non leo aliquet imperdiet. Etiam w sagittis Lectus. Suspendisse ultrices placerat accumsan. Mauris Quis dapibus Orci. W 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 lacus Fringilla na rutrum. Phasellus congue Vestibulum ligula sed consequat. </ p> <P> Vestibulum consectetur scelerisque lacus, ac fermentum lorem Convallis sed. Nam odio tortor, dictum Quis malesuada się, Pellentesque vitae Orci. Vivamus Elementum, Felis ue auctor lobortis, średnica velit egestas Lacus, Quis fermentum metus ante Quis urna. Sed w facilisis libero. Cum sociis natoque penatibus et Magnis dis rodząca Montes, nascetur ridiculus muz. Vestibulum bibendum blandit dolor. Nunc Orci dolor, molestie NEC NIBH się, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapiens in, mollis ornare augue. </ p > <Hr> <h2 id = "punkt-3"> Część III </ h2> <P> Integer pulvinar leo id Risus Pellentesque Vestibulum. Sed średnica libero, sodales eget sapiens 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 w aliquam Lectus. Nam vel sapiens śr. Donec pharetra id Arcu eget blandit. Proin imperdiet Mattis augue w porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt Risus Quis dolor Fringilla blandit. Ut sed sapiens w purus Lacinia porttitor. Nullam iaculis, Felis 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 w 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 w ligula ut rhoncus. </ p> <P> Quisque pharetra velit id velit iaculis Pretium. Nullam się Justo sed ligula porta semper eu Quis enim. Pellentesque Pellentesque, Metusa w facilisis hendrerit, LECTUS velit facilisis Leo, Quis volutpat turpis Arcu Quis enim. Nulla Viverra lorem Elementum interdum ultricies. Suspendisse accumsan quam NEC ante mollis tempus. Morbi vel accumsan diam, Eget Convallis Tellus. Suspendisse Potenti. </ p> <Hr> <h2 id = "punkt-4"> Część IV </ h2> <P> Suspendisse Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum iaculis lacus. Phasellus vitae Convallis ligula, nec volutpat Tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mil gravida, faucibus Convallis neque Pretium. mecenasem Quis sapiens ut leo Fringilla tempor vitae sit amet Leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mil Pretium, fermentum lacus et, Viverra Tellus. Phasellus sodales libero Convallis NEC dui, sit amet fermentum sapiens auctor . Vestibulum ante ipsum PRIMIS w faucibus Orci luctus et ultrices Zapytanie 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 na Mattis. Potenti Suspendisse. Aliquam sit amet gravida NIBH, facilisis gravida odio. Phasellus auctor velit na 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. mecenasem Mattis Lectus enim, Quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit Tellus. < / p> <P> fermentum Phasellus, neque sit amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat Quis faucibus molestie. Proin malesuada consequat Commodo. Mauris iaculis eros ut dapibus luctus, Massa enim Elementum purus, siedzieć amet tristique purus purus NEC felis. Morbi Vestibulum sapiens eget porta pulvinar. Nam się quam śr. Proin rhoncus, Felis Elementum accumsan dictum, Felis nisi Vestibulum Tellus, et ultrices Risus felis w Orci. Quisque Vestibulum sem nisl, vel congue leo dictum, gdzie indziej niesklasyfikowane. Cras eget est w velit sagittis ullamcorper vel et Lectus. W HAC habitasse Platei 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 na felis. Curabitur ac tempus nulla, ut sempre erat. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id. </ p> <P> Ut ut Risus nisl. Fusce porttitor eros Magna luctus, nie congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et Risus Commodo, a 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 NEC dolor ac, tempus Convallis nunc. interdum et malesuada fames ac ante ipsum PRIMIS w faucibus. Nulla suscipit Convallis iaculis. Quisque eget Commodo ligula. Praesent leo dui, facilisis Quis eleifend się, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies Pellentesque. Fusce eu suscipit Massa. </ p> <Hr> <h2 id = "punkt-5"> Część V </ h2> <P> Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl Risus w 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 gdzie indziej niesklasyfikowane. 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. Mecenasem ullamcorper, turpis suscipit Pellentesque Fringilla, Massa lacus pulvinar mil , nec dignissim velit Arcu eget purus. Nam się dapibus Tellus, eget euismod nisl. Ut eget venenatis sapiens. Vivamus vulputate Varius mauris, vel Varius nisl facilisis ac. Nulla aliquet Justo NIBH ornare, eu congue neque rutrum. </ p> <P> Suspendisse Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum iaculis lacus. Phasellus vitae Convallis ligula, nec volutpat Tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mil gravida, faucibus Convallis neque Pretium. mecenasem Quis sapiens ut leo Fringilla tempor vitae sit amet Leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mil Pretium, fermentum lacus et, Viverra Tellus. Phasellus sodales libero Convallis NEC dui, sit amet fermentum sapiens auctor . Vestibulum ante ipsum PRIMIS w faucibus Orci luctus et ultrices Zapytanie cubilia Curae ;. Sed eu Elementum NIBH, Quis Varius libero </ p> <P> Morbi sed fermentum ipsum. Morbi Orci vulputate tortor ornare blandit Quis Orci. Donec aliquam sodales gravida. UT ullamcorper Nisi, ac Pretium velit. Vestibulum vitae Lectus volutpat, consequat lorem sit amet, pulvinar Tellus. W tincidunt vel leo eget pulvinar. Curabitur się eros non lacus malesuada aliquam. Praesent et tempus odio. liczba całkowita a nunc quam. W HAC habitasse Platei dictumst. aliquam porta NIBH nulla, et Mattis turpis placerat eget. Pellentesque dui diam, Pellentesque vel gravida id, accumsan ue magna . Sed 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 w śr 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 sempre . W condimentum, Est faucibus luctus, mI dolor Cursus mi, id vehicula Arcu Risus NIBH. Pellentesque blandit sapiens lacus, vel vehicula nunc feugiat sit amet. </ p> </ Div> </ Div> </ Div> </ Body> </ Html>

    Spróbuj »

    Wyniki przedstawiają się następująco:

    Dodatkowe nawigacji (Nakleić) plug-in JavaScript

Dzięki pozycjonowaniu CSS

W powyższym dwóch z dodatkowym nawigacji () umieszcza trybie plug-in, trzeba przejść przez zawartością pozycjonowania CSS. Dodatkowe nawigacji (Nakleić) plug-in przełączania pomiędzy klasą trzy, każda klasa wykazały szczególnystan:.affix, .affix-topi .affix dołu.Wykonaj następujące kroki, aby skonfigurować swój własny kod CSS dla tych trzech państw (nie opierać się na tej wtyczce).

  • Na początku, dodać elementplug-.affix-top wskazać w swoim najwyższym położeniu.Ten czas nie wymagają pozycjonowania CSS.
  • Podczas przewijania dodanie dodatkowej nawigacji () umieszcza elementy, powinno wywołać rzeczywiste dodatkowe nawigacji (umieszcza). W tym momencie.affix zastąpi .affix-top,anastępnieustawposition: fixed; (dostarczoneprzez Bootstrap kodu CSS).
  • Jeśli zdefiniujemy dnie offset, gdy przewijania osiągnięciu tego położenia należy.affix zastąpiony .affix dołu.Ponieważ przesunięcie jest opcjonalna, jeśli ustawiony offset jest wymagana jednocześnie ustawić odpowiedni CSS. W tym przypadku, należy dodaćpozycję, gdy konieczne: absolute ;.

Opcje

Istnieje kilka opcji, dzięki atrybutów danych lub JavaScript do przejścia. Poniższa tabela zawiera następujące opcje:

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