Latest web development tutorials

Bootstrap navegação adicional (Affix) Widget

navegação (Affix) plug-in adicional permite um <div> fixo em uma determinada posição na página. Você também pode ligar ou desligar usando um interruptor entre o plug-in. Um exemplo comum é um ícone social. Eles vão começar em uma determinada posição, mas quando a página clique em uma tag, o <div> será bloqueado numa posição, não com o resto da página de rolagem.

Se você quiser para se referir às características individuais de plug-in, você precisa fazer referênciaaffix.js.Ou, como Bootstrap plug-in Overview capítulo mencionado, você pode se referir abootstrap.jsou versão comprimida debootstrap.min.js.

uso

Você pode atribuir dados, ou usando JavaScript adicional para navegar (Affix) plug-ins.

  • Através de atributos de dados: Para adicionar um elemento adicional para a navegação comportamento (Affix), só precisa adicionar o elemento que você deseja monitorar dados-espião = "fixar"pode ser. Use Deslocamento para definir o elemento de bloqueio e quando comutador móvel.

    Exemplos

    O exemplo a seguir demonstra o uso do Widget adicional de navegação (Affix) por dados atributo de uso:

    Exemplos

    <! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Title> Bootstrap navegação adicional (Affix) 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>
    / * Estilos personalizados * / ul .nav-abas { width: 140 px ; Margin-top: 20 px ; Border-radius: 4 px ; Border: 1 px sólido #ddd ; Box-sombra: 0 1 px 4 px rgba (0, 0, 0, 0,067) ;} UL-.nav abas li { margin: 0 ; Border-top: 1 px sólido #ddd ;} UL-.nav abas li: first-child { border-top: nenhum ;} UL-.nav abas li uma { margin: 0 ; Padding: 8 px 16 px ; Border-radius: 0 ;} UL-.nav abas li .active a, ul .nav-guias li .active a: hover { color: #fff ; Background: # 0088cc ; Border: 1 px sólido # 0088cc ;} UL-.nav abas li: first-child uma { border-radius: 4 px 4 px 0 0 ;} UL-.nav abas li: last-child uma { border-radius: 0 0 4 px 4 px ;} ul .affix .nav-tabs { top: 30 px ; / * Definir a posição superior do elemento preso * / }
    </ Style> </ Head> <Body Dados-espião = "scroll" data-target = "#myScrollspy"> <Div class = "container"> <Div class = "jumbotron"> <H1> Bootstrap Affix </ h1 > </ Div> <Div class = "linha"> <Div class = "col-XS-3 " ID = "myScrollspy"> <Ul class = "nav nav-guias nav -stacked" Dados-espião = "fixar" compensada-data-top = "125 "> <Li class = "ativo"> <a href = "# seção-1" > a primeira parte </ a> </ li> <Li> <a href = "# seção-2" > A segunda parte </ a> </ li> <Li> <a href = "# seção-3" > Parte III </ a> </ li> <Li> <a href = "# seção-4" > Parte IV </ a> </ li> <Li> <a href = "# section-5" > Parte V </ a> </ li> </ Ul> </ Div> <Div class = "col-xs-9 "> <H2 id = "seção-1"> a primeira parte </ h2> <P> Lorem ipsum dolor sit amet , consectetur adipiscing elit. Nam eu sem tempor, quam varius em, luctus dui. Mauris magna metus, dapibus nec vel turpis, sempre malesuada ante. Vestibulum id metus ac NISL Bibendum scelerisque non non Purus. Suspendisse varius nibh não aliquet sagittis. em tincidunt Orci sit amet elementum vestíbulo. Vivamus fermentum em arcu em aliquam. Quisque aliquam porta odio em fringilla. Vivamus leo NISL, blandit na UE Bibendum, tristique eget risus. Integer aliquet quam ut elit suscipit, interdum id 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 em mattis. Potenti Suspendisse. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit em 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. Maecenas mattis lectus enim, Quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. < / p> <Hr> <H2 id = "seção-2"> A segunda seção </ h2> <P> Nullam hendrerit justo não leo aliquet imperdiet. Etiam em sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris Quis dapibus Orci. Em dapibus velit blandit pharetra tincidunt. Quisque não sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum Bibendum. Donec ac sollicitudin dolor. sed fringilla vitae lacus no rutrum. Phasellus congue vestíbulo ligula consequat sed. </ p> <P> Vestibulum consectetur scelerisque lacus, ac fermentum lorem Convallis sed. Nam tortor odio, dictum Quis malesuada em, Orci vitae pellentesque. Vivamus elementum, felis eu lobortis auctor, diam velit egestas lacus, QUIS fermentum metus ante Quis urna. Sed na facilisis libero. Cum sociis natoque penatibus et magnis dis parturiente montes, nascetur ridiculus mus. Vestibulum Bibendum blandit dolor. dolor Nunc Orci, nibh nec molestie in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit não sapien in, mollis Ornare augue. </ p > <Hr> <H2 id = "seção-3"> Parte III </ h2> <P> Integer pulvinar leo id risus pellentesque vestíbulo. Sed diam libero, sodales eget sapien vel, porttitor Bibendum enim. Donec sed nibh vitae lorem porttitor blandit na ante nec. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam em aliquam lectus. Nam diam vel sapien. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue em porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus Quis dolor fringilla blandit. Ut sapien sed em porttitor Purus lacinia. Nullam iaculis, felis um pretium Ornare, dolor NISL sempre tortor, vel sagittis lacus est consequat eros. Sed id pretium NISL. Curabitur dolor NISL, laoreet id vitae aliquam, 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 em 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 , 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. Bibendum Curabitur em ligula ut rhoncus. </ p> <P> Quisque pharetra velit id velit iaculis pretium. Nullam um justo sed porta ligula sempre eu Quis enim. Pellentesque pellentesque, metus em hendrerit facilisis, 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 Convallis tellus. Suspendisse potenti. </ p> <Hr> <H2 id = "seção-4"> Parte IV </ h2> <P> Suspendisse um Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum um iaculis lacus. Phasellus vitae Convallis ligula, nec tellus volutpat. Vivamus scelerisque mollis NISL, nec vehicula elit egestas a. Sed id luctus metus mi gravida, faucibus Convallis neque pretium. Maecenas 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 nec dui, sit amet fermentum sapien auctor . Vestibulum ante ipsum primis no 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 em mattis. Potenti Suspendisse. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit em 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. Maecenas mattis lectus enim, Quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. < / p> <P> Phasellus fermentum, neque sentar 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, sente-se amet tristique Purus Purus nec felis. Morbi vestíbulo sapien eget porta pulvinar. Nam no diam quam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestíbulo tellus, et ultrices risus felis em Orci. Quisque vestíbulo sem NISL, vel congue leo dictum nec. Cras est eget em velit sagittis ullamcorper vel et lectus. Em 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 em 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 na luctus magna, não eleifend congue nulla. Porttitor Aenean feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, uma grávida commodo turpis. Nam mollis massa dapibus urna aliquet, Quis iaculis elit sodales. Sed eget Ornare Orci, eu malesuada justo. Nunc lacus augue, dictum QUIS id duos, lacinia congue quam. Nulla sem sem, aliquam nec dolor ac, tempus Convallis nunc. interdum et malesuada fames ac ante ipsum primis no faucibus. Nulla suscipit Convallis iaculis. Quisque eget commodo ligula. Praesent leo duos, facilisis eleifend Quis in, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies pellentesque. Fusce eu suscipit massa. </ p> <Hr> <H2 id = "seção-5"> Parte V </ h2> <P> Nam eget Purus nec est consectetur vehicula. Nullam ultrices risus NISL, em viverra libero egestas sit amet. Etiam porttitor dolor não eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu não laoreet. Morbi consequat placerat magna, ac Ornare odio sagittis sed. Donec vitae ullamcorper Purus. Vivamus não 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 id lobortis Purus adipiscing. Maecenas ullamcorper, turpis suscipit fringilla pellentesque, massa lacus pulvinar mi , nec dignissim velit arcu eget Purus. Nam no tellus dapibus, eget euismod NISL. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius ac NISL facilisis. Nulla aliquet justo um nibh Ornare, eu congue neque rutrum. </ p> <P> Suspendisse um Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum um iaculis lacus. Phasellus vitae Convallis ligula, nec tellus volutpat. Vivamus scelerisque mollis NISL, nec vehicula elit egestas a. Sed id luctus metus mi gravida, faucibus Convallis neque pretium. Maecenas 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 nec dui, sit amet fermentum sapien auctor . Vestibulum ante ipsum primis no faucibus Orci luctus et ultrices posuere cubilia Curae ;. Sed eu elementum nibh, Quis varius libero </ p> <P> Morbi sed ipsum fermentum. Morbi um Orci vulputate tortor Ornare blandit uma Quis Orci. Donec aliquam sodales gravida. Em ut ullamcorper nisi, ac pretium velit. Vestibulum volutpat vitae lectus, lorem consequat sit amet, pulvinar tellus. Em tincidunt vel leo eget pulvinar. Curabitur um eros não lacus aliquam malesuada. Praesent et tempus odio. Integer um nunc quam. Em hac dictumst habitasse platea. aliquam porta nibh nulla, et mattis turpis placerat eget. pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna . Sed a arcu semper, ut dignissim leo. </ p> <P> sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum Quis est dictum ultrices. Velit Aenean nibh, fringilla no id diam, 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 . Em condimentum, est um faucibus luctus, mi dolor Cursus mi, id vehicula arcu risus um nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet. </ p> </ Div> </ Div> </ Div> </ Body> </ Html>

    tente »

    Os resultados são os seguintes:

    Adicional de Navegação (Affix) plug propriedades de dados

  • Por JavaScript: Você pode adicionar um elemento JavaScript navegação adicionado manualmente (Affix), como segue:
    $ ( "# MyAffix '). Affix ({
   offset: {
	  top: 100, bottom: function () {
		 retorno (this.bottom = 
			$ ( '. Bs-footer'). OuterHeight (true))
		 }
	  }
})

    Exemplos

    O exemplo a seguir demonstra o uso do Widget adicional de navegação (Affix) através de uso de JavaScript:

    Exemplos

    <! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Title> Bootstrap navegação adicional (Affix) 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>
    / * Estilos personalizados * / ul .nav-abas { width: 140 px ; Margin-top: 20 px ; Border-radius: 4 px ; Border: 1 px sólido #ddd ; Box-sombra: 0 1 px 4 px rgba (0, 0, 0, 0,067) ;} UL-.nav abas li { margin: 0 ; Border-top: 1 px sólido #ddd ;} UL-.nav abas li: first-child { border-top: nenhum ;} UL-.nav abas li uma { margin: 0 ; Padding: 8 px 16 px ; Border-radius: 0 ;} UL-.nav abas li .active a, ul .nav-guias li .active a: hover { color: #fff ; Background: # 0088cc ; Border: 1 px sólido # 0088cc ;} UL-.nav abas li: first-child uma { border-radius: 4 px 4 px 0 0 ;} UL-.nav abas li: last-child uma { border-radius: 0 0 4 px 4 px ;} ul .affix .nav-tabs { top: 30 px ; / * Definir a posição superior do elemento preso * / }
    </ Style> <Script>
    $ (Documento). Ready (função () {$ ( "#myNav"). Affix ({ offset: { top: 125 } });});
    </ Script> </ Head> <Body Dados-espião = "scroll" data-target = "#myScrollspy"> <Div class = "container"> <Div class = "jumbotron"> <H1> Bootstrap Affix </ h1 > </ Div> <Div class = "linha"> <Div class = "col-XS-3 " ID = "myScrollspy"> <Ul class = "nav nav-guias nav -stacked" id = "MyNav"> <Li class = "ativo"> <a href = "# seção-1" > a primeira parte </ a> </ li> <Li> <a href = "# seção-2" > A segunda parte </ a> </ li> <Li> <a href = "# seção-3" > Parte III </ a> </ li> <Li> <a href = "# seção-4" > Parte IV </ a> </ li> <Li> <a href = "# section-5" > Parte V </ a> </ li> </ Ul> </ Div> <Div class = "col-xs-9 "> <H2 id = "seção-1"> a primeira parte </ h2> <P> Lorem ipsum dolor sit amet , consectetur adipiscing elit. Nam eu sem tempor, quam varius em, luctus dui. Mauris magna metus, dapibus nec vel turpis, sempre malesuada ante. Vestibulum id metus ac NISL Bibendum scelerisque non non Purus. Suspendisse varius nibh não aliquet sagittis. em tincidunt Orci sit amet elementum vestíbulo. Vivamus fermentum em arcu em aliquam. Quisque aliquam porta odio em fringilla. Vivamus leo NISL, blandit na UE Bibendum, tristique eget risus. Integer aliquet quam ut elit suscipit, interdum id 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 em mattis. Potenti Suspendisse. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit em 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. Maecenas mattis lectus enim, Quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. < / p> <Hr> <H2 id = "seção-2"> A segunda seção </ h2> <P> Nullam hendrerit justo não leo aliquet imperdiet. Etiam em sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris Quis dapibus Orci. Em dapibus velit blandit pharetra tincidunt. Quisque não sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum Bibendum. Donec ac sollicitudin dolor. sed fringilla vitae lacus no rutrum. Phasellus congue vestíbulo ligula consequat sed. </ p> <P> Vestibulum consectetur scelerisque lacus, ac fermentum lorem Convallis sed. Nam tortor odio, dictum Quis malesuada em, Orci vitae pellentesque. Vivamus elementum, felis eu lobortis auctor, diam velit egestas lacus, QUIS fermentum metus ante Quis urna. Sed na facilisis libero. Cum sociis natoque penatibus et magnis dis parturiente montes, nascetur ridiculus mus. Vestibulum Bibendum blandit dolor. dolor Nunc Orci, nibh nec molestie in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit não sapien in, mollis Ornare augue. </ p > <Hr> <H2 id = "seção-3"> Parte III </ h2> <P> Integer pulvinar leo id risus pellentesque vestíbulo. Sed diam libero, sodales eget sapien vel, porttitor Bibendum enim. Donec sed nibh vitae lorem porttitor blandit na ante nec. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam em aliquam lectus. Nam diam vel sapien. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue em porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus Quis dolor fringilla blandit. Ut sapien sed em porttitor Purus lacinia. Nullam iaculis, felis um pretium Ornare, dolor NISL sempre tortor, vel sagittis lacus est consequat eros. Sed id pretium NISL. Curabitur dolor NISL, laoreet id vitae aliquam, 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 em 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 , 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. Bibendum Curabitur em ligula ut rhoncus. </ p> <P> Quisque pharetra velit id velit iaculis pretium. Nullam um justo sed porta ligula sempre eu Quis enim. Pellentesque pellentesque, metus em hendrerit facilisis, 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 Convallis tellus. Suspendisse potenti. </ p> <Hr> <H2 id = "seção-4"> Parte IV </ h2> <P> Suspendisse um Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum um iaculis lacus. Phasellus vitae Convallis ligula, nec tellus volutpat. Vivamus scelerisque mollis NISL, nec vehicula elit egestas a. Sed id luctus metus mi gravida, faucibus Convallis neque pretium. Maecenas 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 nec dui, sit amet fermentum sapien auctor . Vestibulum ante ipsum primis no 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 em mattis. Potenti Suspendisse. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit em 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. Maecenas mattis lectus enim, Quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus. < / p> <P> Phasellus fermentum, neque sentar 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, sente-se amet tristique Purus Purus nec felis. Morbi vestíbulo sapien eget porta pulvinar. Nam no diam quam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestíbulo tellus, et ultrices risus felis em Orci. Quisque vestíbulo sem NISL, vel congue leo dictum nec. Cras est eget em velit sagittis ullamcorper vel et lectus. Em 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 em 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 na luctus magna, não eleifend congue nulla. Porttitor Aenean feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, uma grávida commodo turpis. Nam mollis massa dapibus urna aliquet, Quis iaculis elit sodales. Sed eget Ornare Orci, eu malesuada justo. Nunc lacus augue, dictum QUIS id duos, lacinia congue quam. Nulla sem sem, aliquam nec dolor ac, tempus Convallis nunc. interdum et malesuada fames ac ante ipsum primis no faucibus. Nulla suscipit Convallis iaculis. Quisque eget commodo ligula. Praesent leo duos, facilisis eleifend Quis in, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies pellentesque. Fusce eu suscipit massa. </ p> <Hr> <H2 id = "seção-5"> Parte V </ h2> <P> Nam eget Purus nec est consectetur vehicula. Nullam ultrices risus NISL, em viverra libero egestas sit amet. Etiam porttitor dolor não eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu não laoreet. Morbi consequat placerat magna, ac Ornare odio sagittis sed. Donec vitae ullamcorper Purus. Vivamus não 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 id lobortis Purus adipiscing. Maecenas ullamcorper, turpis suscipit fringilla pellentesque, massa lacus pulvinar mi , nec dignissim velit arcu eget Purus. Nam no tellus dapibus, eget euismod NISL. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius ac NISL facilisis. Nulla aliquet justo um nibh Ornare, eu congue neque rutrum. </ p> <P> Suspendisse um Orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum um iaculis lacus. Phasellus vitae Convallis ligula, nec tellus volutpat. Vivamus scelerisque mollis NISL, nec vehicula elit egestas a. Sed id luctus metus mi gravida, faucibus Convallis neque pretium. Maecenas 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 nec dui, sit amet fermentum sapien auctor . Vestibulum ante ipsum primis no faucibus Orci luctus et ultrices posuere cubilia Curae ;. Sed eu elementum nibh, Quis varius libero </ p> <P> Morbi sed ipsum fermentum. Morbi um Orci vulputate tortor Ornare blandit uma Quis Orci. Donec aliquam sodales gravida. Em ut ullamcorper nisi, ac pretium velit. Vestibulum volutpat vitae lectus, lorem consequat sit amet, pulvinar tellus. Em tincidunt vel leo eget pulvinar. Curabitur um eros não lacus aliquam malesuada. Praesent et tempus odio. Integer um nunc quam. Em hac dictumst habitasse platea. aliquam porta nibh nulla, et mattis turpis placerat eget. pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna . Sed a arcu semper, ut dignissim leo. </ p> <P> sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum Quis est dictum ultrices. Velit Aenean nibh, fringilla no id diam, 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 . Em condimentum, est um faucibus luctus, mi dolor Cursus mi, id vehicula arcu risus um nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet. </ p> </ Div> </ Div> </ Div> </ Body> </ Html>

    tente »

    Os resultados são os seguintes:

    Adicional de Navegação (Affix) plug-in Javascript

Pelo posicionamento CSS

Nos dois acima com o modo plug-in de navegação adicional (Affix), você tem que ir através do conteúdo de posicionamento CSS. Adicional de Navegação (Affix) plug-in de comutação entre as três classes, cada classe têm mostrado umestado particular:.affix, .affix-tope .affix-bottom.Siga estes passos para criar o seu próprio CSS para estes três estados (não contar com este plugin).

  • No início, adicione o elementoplug-.affix-top para indicar na sua posição mais elevada.Desta vez não requer qualquer posicionamento CSS.
  • Ao percorrer a adição de elementos de navegação adicional (Affix), ele deve acionar a navegação real adicional (Affix). Neste ponto.affix irá substituir .affix-top,eaposição definida: fixo; (fornecidopelo código CSS Bootstrap).
  • Se você definir o fundo do deslocamento, quando o rolo chegar a esta posição deve.affix substituído .affix-bottom.Desde o deslocamento é opcional, se você definir a compensação é necessária, ao mesmo tempo definir o CSS apropriado. Neste caso, adicionar aposição quando necessário: absolute ;.

opções

Existem algumas opções através de atributos de dados ou JavaScript para passar. A tabela a seguir lista estas opções:

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