Latest web development tutorials

Bootstrap widget de navegación adicional (afijo)

La navegación (afijo) plug-in permite un <div> fijo en una determinada posición en la página. También se puede activar o desactivar mediante un interruptor entre el plug-in. Un ejemplo común es un icono social. Ellos comenzarán en una determinada posición, pero cuando la página haga clic en una etiqueta, la etiqueta <div> se bloqueará en una posición, no con el resto de la página de desplazamiento.

Si se desea hacer referencia a las características individuales de plug-in, es necesario hacer referencia aaffix.js.O, como Bootstrap general Plugin capítulo mencionado, se puede hacer referencia abootstrap.jso versión comprimida debootstrap.min.js.

uso

Puede datos de atributos, o mediante el uso de JavaScript adicional para navegar (afijo) plug-ins.

  • A través de los atributos de los datos: Para añadir un elemento adicional al comportamiento de navegación (afijo), sólo tiene que añadir el elemento que desea supervisar los datos espía = "pegue"puede ser. Use Offset para definir el elemento de bloqueo y cuando cambiar móvil.

    Ejemplos

    El siguiente ejemplo muestra el uso del widget de navegación adicional (afijo) por los datos de atributo de uso:

    Ejemplos

    <! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Título> Bootstrap de navegación adicional (afijo) Reproductor </ title> <Enlace 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>
    / * Estilos personalizados * / ul-pestañas {.NAV anchura: 140 px ; Margin-top: 20 px ; La frontera de radio: 4 px ; Border: 1 px sólido #ddd ; Box-shadow: 0 1 px 4 px RGBA (0, 0, 0, 0.067) ;} ul-.nav pestañas li { margen: 0 ; Border-top: 1 px sólido #ddd ;} ul-.nav pestañas li: first-child { border-top: ninguno ;} ul-.nav pestañas li a { margen: 0 ; Relleno: 8 px 16 px ; La frontera de radio: 0 ;} ul-.nav pestañas .active li a, .NAV-pestañas ul .active li a: hover { Color: #fff Fundamento: # 0088cc ; Border: 1 px sólido # 0088cc ;} ul-.nav pestañas li: first-child a { la frontera de radio: 4 px 4 px 0 0 ;} ul-.nav pestañas li: last-child a { la frontera de radio: 0 0 4 px 4 px ;} ul-.affix .nav pestañas { arriba: 30 px ; / * Ajuste la posición de la parte superior del elemento de clavado * / }
    </ Style> </ Head> <Cuerpo datos de espionaje = "scroll" data-target = "#myScrollspy"> <Div class = "contenedor"> <Div class = "pantalla gigante"> <H1> Bootstrap Affix </ h1 > </ Div> <Div class = "fila"> <Div class = "Col-xs-3 " id = "myScrollspy"> <ul class = "nav nav-pestañas de navegación -stacked" datos de espionaje = "fijar" datos-offset-top = "125 "> <Li class = "activa"> <a href = "# sección-1" > la primera parte </ a> </ li> <Li> <a href = "# sección-2" > La segunda parte </ a> </ li> <Li> <a href = "# sección-3" > Parte III </ a> </ li> <Li> <a href = "# sección-4" > Parte IV </ a> </ li> <Li> <a href = "# 5-sección" > Parte V </ a> </ li> </ Ul> </ Div> <Div class = "col-xs-9 "> <H2 id = "sección-1"> la primera parte </ h2> <P> Lorem ipsum dolor sit amet , elit consectetur adipiscing. Nam eu sem tempor, quam varius en, luctus dúos. Mauris magna metus, dapibus nec vel turpis, semper malesuada ante. Vestibulum Identificación del metus ac nisl bibendum scelerisque no no purus. Suspendisse varius nibh no aliquet sagittis. en tincidunt Orci sit amet elementum vestibulum. Vivamus fermentum en arcu en aliquam. Quisque aliquam porta odio en fringilla. Vivamus leo nisl, blandit en bibendum eu, tristique Risus eget. Entero aliquet quam ut elit suscipit, interdum Identificación porttitor ñeque. Entero ligula faucibus. < / p> <P> Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut Risus tempus dictum. Pellentesque viverra sagittis quam en Mattis. Potenti Suspendisse. Aliquam sit amet nibh gesta, facilisis gesta odio. Phasellus velita auctor en blandit lacus , 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. Mecenas mattis lectus enim, quis tincidunt dúos molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit Tellus. < / p> <Hr> <H2 id = "sección-2"> La segunda sección </ h2> <P> Nullam hendrerit Justo no leo aliquet imperdiet. Etiam en sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus Orci. En dapibus velita blandit pharetra tincidunt. Quisque no sapien ncp lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. fringilla sed vitae lacus en rutrum. Phasellus congue vestibulum ligula consequat sed. </ p> <P> Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam tortor odio, dictado quis malesuada en, Orci vitae pellentesque. Vivamus elementum, Felis eu lobortis auctor, diam velita egestas lacus, quis fermentum metus ante quis urna. Sed en facilisis Libero. Cum sociis natoque penatibus et Magnis dis parturienta montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. dolor Nunc Orci, nibh ncp molestie en, hendrerit tincidunt ante. Vivamus sem augue, hendrerit no sapien en, mollis ornare augue. </ p > <Hr> <H2 id = "sección-3"> Parte III </ h2> <P> Entero pulvinar Leo Identificación del Risus pellentesque vestibulum. Sed diam libero, sodales eget sapiens vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit en ante nec. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem condimentum malesuada. Etiam en aliquam lectus. Nam diámetro vel sapiens. Donec pharetra Identificación arcu eget blandit. Proin imperdiet mattis augue en porttitor. Quisque tempus enim Identificación lobortis feugiat. Suspendisse tincidunt Risus quis dolor fringilla blandit. Ut sapiens sed en porttitor purus Lacinia. Nullam iaculis, felis una pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed Identificación del pretium nisl. Curabitur nisl dolor, laoreet Identificación vitae aliquam, tincidunt sit amet mauris. </ p> <P> Phasellus vitae suscipit Justo. Mauris pharetra feugiat ante Identificación Lacinia. Etiam faucibus Mauris id TEMPOR egestas. Duis luctus turpis en tincidunt accumsan. Phasellus Risus Risus, volutpat vel Tellus ac, tincidunt fringilla Massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Cras mattis interdum ipsum, tempus mauris vel , semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, Identificación del vulputate ipsum Ullamcorper ut. Cras ac pulvinar purus, potenti ac viverra est. Suspendisse. Entero pellentesque ñeque et elementum tempus. Curabitur bibendum en ligula ut rhoncus. </ p> <P> velita Quisque pharetra velita Identificación iaculis pretium. Nullam un justo sed porta ligula sempre eu quis enim. Pellentesque pellentesque, Metus en hendrerit facilisis, lectus velita facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan ncp quam ante tempus mollis. Morbi vel accumsan diámetro, eGET potenti convallis Tellus. Suspendisse. </ p> <Hr> <H2 id = "sección-4"> Parte IV </ h2> <P> Suspendisse un Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum un iaculis lacus. Phasellus vitae convallis ligula, ncp Tellus volutpat. Vivamus scelerisque mollis nisl, ncp vehicula elit egestas a. Sed Identificación luctus metus mi gesta, faucibus convallis ñeque pretium. Mecenas 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 y, viverra Tellus. Phasellus sodales libero convallis ncp dui, sit amet fermentum sapiens auctor . Vestibulum ante ipsum primis en 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 Risus tempus dictum. Pellentesque viverra sagittis quam en Mattis. Potenti Suspendisse. Aliquam sit amet nibh gesta, facilisis gesta odio. Phasellus velita auctor en blandit lacus , 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. Mecenas mattis lectus enim, quis tincidunt dúos molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit Tellus. < / p> <P> Phasellus fermentum, ñeque sentarse amet tempor sodales, 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, sentarse Amet tristique Purus Purus ncp felis. Morbi vestibulum sapiens eget porta pulvinar. Nam al diámetro quam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum Tellus, et ultrices Risus felis en Orci. Quisque vestibulum sem nisl, vel congue leo dictum nec. Cras est eget en velita sagittis Ullamcorper vel et lectus. en hac dictumst habitasse platea. Etiam interdum iaculis velita, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendrerit urna, faucibus rhoncus Massa nibh en felis. Curabitur ac nulla tempus, erat ut semper. Vivamus porta Ullamcorper sem, ornare egestas mauris facilisis ID. </ p> <P> Ut nisl ut Risus. Fusce porttitor eros en luctus magna, no eleifend congue nulla. Porttitor Aenean feugiat dolor sit amet facilisis. Pellentesque venenatis magna et Risus commodo, una gesta commodo turpis. Nam mollis Massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare Orci, eu malesuada Justo. Nunc lacus augue, dictado quis dúos de la identificación, lacinia congue quam. Nulla sem sem, aliquam ncp dolor ac, tempus convallis nunc. interdum et malesuada famas ac ante ipsum primis en faucibus. Nulla suscipit convallis iaculis. Quisque eget commodo ligula. Praesent leo dúos, facilisis quis eleifend en, aliquet vitae nunc. Suspendisse fermentum odio ac Massa ultricies pellentesque. Fusce eu suscipit Massa. </ p> <Hr> <H2 id = "sección-5"> Parte V </ h2> <P> Nam eget purus ncp est consectetur vehicula. Nullam ultrices Risus nisl, en viverra libero egestas sit amet. Etiam porttitor dolor no eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu no laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae Ullamcorper purus. Vivamus no metus ac Justo porta volutpat. </ p> <P> Vivamus mattis accumsan erat, vel convallis Risus pretium nec. Entero nunc nulla, viverra ut sem no, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, Sodales Identificación lobortis purus adipiscing. Mecenas Ullamcorper, turpis suscipit fringilla pellentesque, Massa lacus pulvinar millas , ncp dignissim velita arcu eget purus. Nam en Tellus dapibus, eget euismod nisl. Ut eget venenatis sapiens. Vivamus vulputate varius mauris, vel varius ac nisl facilisis. Nulla aliquet Justo a nibh ornare, eu congue ñeque rutrum. </ p> <P> Suspendisse un Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum un iaculis lacus. Phasellus vitae convallis ligula, ncp Tellus volutpat. Vivamus scelerisque mollis nisl, ncp vehicula elit egestas a. Sed Identificación luctus metus mi gesta, faucibus convallis ñeque pretium. Mecenas 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 y, viverra Tellus. Phasellus sodales libero convallis ncp dui, sit amet fermentum sapiens auctor . Vestibulum ante ipsum primis en 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 gesta. En ut nisi Ullamcorper, ac pretium velita. Vestibulum volutpat vitae lectus, lorem consequat sit amet, Tellus pulvinar. En tincidunt leo vel eget pulvinar. Curabitur un eros no lacus aliquam malesuada. Praesent et tempus odio. entero a nunc quam. En hac dictumst habitasse platea. aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dúos de diámetro, pellentesque vel gesta Identificación, accumsan eu magna . Sed a arcu semper, ut dignissim Leo. </ p> <P> sed vitae lobortis diámetro, Identificación del molestie magna. Aliquam consequat ipsum Quis est dictum ultrices. Velita Aenean nibh, fringilla de Identificación de diámetro, blandit hendrerit lacus. Donec vehicula rutrum Tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Erat aliquam volutpat. Vivamus lobortis urna quis gesta sempre . En condimentum, est un faucibus luctus, mi mi dolor cursus, Identificación del vehicula arcu Risus un nibh. Pellentesque blandit sapiens lacus, vel vehicula nunc feugiat sit amet. </ p> </ Div> </ Div> </ Div> </ Body> </ Html>

    Trate »

    Los resultados son los siguientes:

    adicionales de navegación (afijo) enchufe propiedades de datos

  • Por JavaScript: Se puede añadir un elemento de navegación JavaScript añadido manualmente (afijo), de la siguiente manera:
    $ ( '# MyAffix'). Affix ({
   offset: {
	  superior: 100, parte inferior: function () {
		 retorno (= this.bottom 
			$ ( '. B-pie de página'). OuterHeight (verdadero))
		 }
	  }
})

    Ejemplos

    El siguiente ejemplo muestra el uso del widget de navegación adicional (afijo) mediante el uso de JavaScript:

    Ejemplos

    <! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Título> Bootstrap de navegación adicional (afijo) Reproductor </ title> <Enlace 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>
    / * Estilos personalizados * / ul-pestañas {.NAV anchura: 140 px ; Margin-top: 20 px ; La frontera de radio: 4 px ; Border: 1 px sólido #ddd ; Box-shadow: 0 1 px 4 px RGBA (0, 0, 0, 0.067) ;} ul-.nav pestañas li { margen: 0 ; Border-top: 1 px sólido #ddd ;} ul-.nav pestañas li: first-child { border-top: ninguno ;} ul-.nav pestañas li a { margen: 0 ; Relleno: 8 px 16 px ; La frontera de radio: 0 ;} ul-.nav pestañas .active li a, .NAV-pestañas ul .active li a: hover { Color: #fff Fundamento: # 0088cc ; Border: 1 px sólido # 0088cc ;} ul-.nav pestañas li: first-child a { la frontera de radio: 4 px 4 px 0 0 ;} ul-.nav pestañas li: last-child a { la frontera de radio: 0 0 4 px 4 px ;} ul-.affix .nav pestañas { arriba: 30 px ; / * Ajuste la posición de la parte superior del elemento de clavado * / }
    </ Style> <Script>
    $ (Document). Ready (función () {$ ( "#myNav"). Affix ({ offset: { superior: 125 } });});
    </ Script> </ Head> <Cuerpo datos de espionaje = "scroll" data-target = "#myScrollspy"> <Div class = "contenedor"> <Div class = "pantalla gigante"> <H1> Bootstrap Affix </ h1 > </ Div> <Div class = "fila"> <Div class = "Col-xs-3 " id = "myScrollspy"> <ul class = "nav nav-pestañas de navegación -stacked" id = "myNav"> <Li class = "activa"> <a href = "# sección-1" > la primera parte </ a> </ li> <Li> <a href = "# sección-2" > La segunda parte </ a> </ li> <Li> <a href = "# sección-3" > Parte III </ a> </ li> <Li> <a href = "# sección-4" > Parte IV </ a> </ li> <Li> <a href = "# 5-sección" > Parte V </ a> </ li> </ Ul> </ Div> <Div class = "col-xs-9 "> <H2 id = "sección-1"> la primera parte </ h2> <P> Lorem ipsum dolor sit amet , elit consectetur adipiscing. Nam eu sem tempor, quam varius en, luctus dúos. Mauris magna metus, dapibus nec vel turpis, semper malesuada ante. Vestibulum Identificación del metus ac nisl bibendum scelerisque no no purus. Suspendisse varius nibh no aliquet sagittis. en tincidunt Orci sit amet elementum vestibulum. Vivamus fermentum en arcu en aliquam. Quisque aliquam porta odio en fringilla. Vivamus leo nisl, blandit en bibendum eu, tristique Risus eget. Entero aliquet quam ut elit suscipit, interdum Identificación porttitor ñeque. Entero ligula faucibus. < / p> <P> Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut Risus tempus dictum. Pellentesque viverra sagittis quam en Mattis. Potenti Suspendisse. Aliquam sit amet nibh gesta, facilisis gesta odio. Phasellus velita auctor en blandit lacus , 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. Mecenas mattis lectus enim, quis tincidunt dúos molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit Tellus. < / p> <Hr> <H2 id = "sección-2"> La segunda sección </ h2> <P> Nullam hendrerit Justo no leo aliquet imperdiet. Etiam en sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus Orci. En dapibus velita blandit pharetra tincidunt. Quisque no sapien ncp lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. fringilla sed vitae lacus en rutrum. Phasellus congue vestibulum ligula consequat sed. </ p> <P> Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam tortor odio, dictado quis malesuada en, Orci vitae pellentesque. Vivamus elementum, Felis eu lobortis auctor, diam velita egestas lacus, quis fermentum metus ante quis urna. Sed en facilisis Libero. Cum sociis natoque penatibus et Magnis dis parturienta montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. dolor Nunc Orci, nibh ncp molestie en, hendrerit tincidunt ante. Vivamus sem augue, hendrerit no sapien en, mollis ornare augue. </ p > <Hr> <H2 id = "sección-3"> Parte III </ h2> <P> Entero pulvinar Leo Identificación del Risus pellentesque vestibulum. Sed diam libero, sodales eget sapiens vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit en ante nec. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem condimentum malesuada. Etiam en aliquam lectus. Nam diámetro vel sapiens. Donec pharetra Identificación arcu eget blandit. Proin imperdiet mattis augue en porttitor. Quisque tempus enim Identificación lobortis feugiat. Suspendisse tincidunt Risus quis dolor fringilla blandit. Ut sapiens sed en porttitor purus Lacinia. Nullam iaculis, felis una pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed Identificación del pretium nisl. Curabitur nisl dolor, laoreet Identificación vitae aliquam, tincidunt sit amet mauris. </ p> <P> Phasellus vitae suscipit Justo. Mauris pharetra feugiat ante Identificación Lacinia. Etiam faucibus Mauris id TEMPOR egestas. Duis luctus turpis en tincidunt accumsan. Phasellus Risus Risus, volutpat vel Tellus ac, tincidunt fringilla Massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Cras mattis interdum ipsum, tempus mauris vel , semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, Identificación del vulputate ipsum Ullamcorper ut. Cras ac pulvinar purus, potenti ac viverra est. Suspendisse. Entero pellentesque ñeque et elementum tempus. Curabitur bibendum en ligula ut rhoncus. </ p> <P> velita Quisque pharetra velita Identificación iaculis pretium. Nullam un justo sed porta ligula sempre eu quis enim. Pellentesque pellentesque, Metus en hendrerit facilisis, lectus velita facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan ncp quam ante tempus mollis. Morbi vel accumsan diámetro, eGET potenti convallis Tellus. Suspendisse. </ p> <Hr> <H2 id = "sección-4"> Parte IV </ h2> <P> Suspendisse un Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum un iaculis lacus. Phasellus vitae convallis ligula, ncp Tellus volutpat. Vivamus scelerisque mollis nisl, ncp vehicula elit egestas a. Sed Identificación luctus metus mi gesta, faucibus convallis ñeque pretium. Mecenas 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 y, viverra Tellus. Phasellus sodales libero convallis ncp dui, sit amet fermentum sapiens auctor . Vestibulum ante ipsum primis en 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 Risus tempus dictum. Pellentesque viverra sagittis quam en Mattis. Potenti Suspendisse. Aliquam sit amet nibh gesta, facilisis gesta odio. Phasellus velita auctor en blandit lacus , 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. Mecenas mattis lectus enim, quis tincidunt dúos molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit Tellus. < / p> <P> Phasellus fermentum, ñeque sentarse amet tempor sodales, 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, sentarse Amet tristique Purus Purus ncp felis. Morbi vestibulum sapiens eget porta pulvinar. Nam al diámetro quam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum Tellus, et ultrices Risus felis en Orci. Quisque vestibulum sem nisl, vel congue leo dictum nec. Cras est eget en velita sagittis Ullamcorper vel et lectus. en hac dictumst habitasse platea. Etiam interdum iaculis velita, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendrerit urna, faucibus rhoncus Massa nibh en felis. Curabitur ac nulla tempus, erat ut semper. Vivamus porta Ullamcorper sem, ornare egestas mauris facilisis ID. </ p> <P> Ut nisl ut Risus. Fusce porttitor eros en luctus magna, no eleifend congue nulla. Porttitor Aenean feugiat dolor sit amet facilisis. Pellentesque venenatis magna et Risus commodo, una gesta commodo turpis. Nam mollis Massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare Orci, eu malesuada Justo. Nunc lacus augue, dictado quis dúos de la identificación, lacinia congue quam. Nulla sem sem, aliquam ncp dolor ac, tempus convallis nunc. interdum et malesuada famas ac ante ipsum primis en faucibus. Nulla suscipit convallis iaculis. Quisque eget commodo ligula. Praesent leo dúos, facilisis quis eleifend en, aliquet vitae nunc. Suspendisse fermentum odio ac Massa ultricies pellentesque. Fusce eu suscipit Massa. </ p> <Hr> <H2 id = "sección-5"> Parte V </ h2> <P> Nam eget purus ncp est consectetur vehicula. Nullam ultrices Risus nisl, en viverra libero egestas sit amet. Etiam porttitor dolor no eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu no laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae Ullamcorper purus. Vivamus no metus ac Justo porta volutpat. </ p> <P> Vivamus mattis accumsan erat, vel convallis Risus pretium nec. Entero nunc nulla, viverra ut sem no, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, Sodales Identificación lobortis purus adipiscing. Mecenas Ullamcorper, turpis suscipit fringilla pellentesque, Massa lacus pulvinar millas , ncp dignissim velita arcu eget purus. Nam en Tellus dapibus, eget euismod nisl. Ut eget venenatis sapiens. Vivamus vulputate varius mauris, vel varius ac nisl facilisis. Nulla aliquet Justo a nibh ornare, eu congue ñeque rutrum. </ p> <P> Suspendisse un Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum un iaculis lacus. Phasellus vitae convallis ligula, ncp Tellus volutpat. Vivamus scelerisque mollis nisl, ncp vehicula elit egestas a. Sed Identificación luctus metus mi gesta, faucibus convallis ñeque pretium. Mecenas 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 y, viverra Tellus. Phasellus sodales libero convallis ncp dui, sit amet fermentum sapiens auctor . Vestibulum ante ipsum primis en 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 gesta. En ut nisi Ullamcorper, ac pretium velita. Vestibulum volutpat vitae lectus, lorem consequat sit amet, Tellus pulvinar. En tincidunt leo vel eget pulvinar. Curabitur un eros no lacus aliquam malesuada. Praesent et tempus odio. entero a nunc quam. En hac dictumst habitasse platea. aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dúos de diámetro, pellentesque vel gesta Identificación, accumsan eu magna . Sed a arcu semper, ut dignissim Leo. </ p> <P> sed vitae lobortis diámetro, Identificación del molestie magna. Aliquam consequat ipsum Quis est dictum ultrices. Velita Aenean nibh, fringilla de Identificación de diámetro, blandit hendrerit lacus. Donec vehicula rutrum Tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Erat aliquam volutpat. Vivamus lobortis urna quis gesta sempre . En condimentum, est un faucibus luctus, mi mi dolor cursus, Identificación del vehicula arcu Risus un nibh. Pellentesque blandit sapiens lacus, vel vehicula nunc feugiat sit amet. </ p> </ Div> </ Div> </ Div> </ Body> </ Html>

    Trate »

    Los resultados son los siguientes:

    adicionales de navegación (afijo) plug-in Javascript

Por posicionamiento CSS

En los dos anteriores con el modo de plug-in de navegación adicional (afijo), usted tiene que ir a través de contenidos posicionamiento CSS. adicionales de navegación (afijo) plug-in de cambio entre las tres clases, cada clase han demostrado unestado particular:.affix, .affix-topy .affix-inferior.Siga estos pasos para configurar su propio CSS para estos tres estados (no se basan en este plugin).

  • Al principio, agregue el elementoenchufable .affix-tapa que indique en su posición más alta.Esta vez no requiere ningún posicionamiento CSS.
  • Al desplazarse por la adición de elementos de navegación adicionales (afijo), que debe dar lugar a la navegación real adicional (afijo). En este punto.affix reemplazará .affix-top,y laposición set: fijo; (proporcionadoporelcódigo CSS Bootstrap).
  • Si se define la parte inferior de la compensación, cuando el desplazamiento de llegar a esta posición debe.affix reemplazado .affix-inferior.Dado que el desplazamiento es opcional, si se establece que se requiere al mismo tiempo establecer el CSS correspondiente y el offset. En este caso, añadir laposición cuando sea necesario: absoluta ;.

opciones

Hay algunas opciones a través de los atributos de datos o JavaScript para aprobar. En la siguiente tabla se muestran las siguientes opciones:

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