Este artigo aprende principalmente o plug -in JavaScript - rolando.
1. Case
O plug-in de escuta de rolagem pode atualizar automaticamente as marcas de navegação correspondentes de acordo com a posição da barra de rolagem. Você pode tentar rolar esta página e ver as alterações na navegação à esquerda.
Primeiro coloque o código implementado, você pode verificar o efeito testando o código.
<! Doctype html> <html> <head> <title> bootstrap </title> <meta name = "viewport" content = "width = width de dispositivo, escala inicial = 1.0"> <!-bootstrap-> <link href = "css/bootstrap.ninin.cssshssh-> <link href =" css/bootstrap.ninin.css " <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <! [endif]-> <style type = "text/css"> .Scrollspy-expler {Hight: 200px; Overflow: Auto; Posição: relativa; borda: 1px vermelho sólido; } </style> </head> <body><div > <nav id="navbar-example" role="navigation"> <div> <button type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href = "#"> nome do projeto </a> </div> <div> <ul> <li> <a href = "#gordo">@gord </a> </li> <li> <a href = "#mdo">@mdo </a> </li> <li> <a-href = "#"#">">@mdo </a> </li> <li> <a-href = "#"#"#">@mdo <b> </b> </a> <ul role = "menu" aria-labelledby = "navbardrop1"> <li> <a href = "#um" tabindex = "-1"> um </a> </li> <li> <li> <a href = "#dois" tabinderx = "-1"> </a> tabindex = "-1"> três </a> </li> </ul> </li> </li> </li> </li> </div> </nav> <div dados-offset = "0" data-spy = "scroll" data-target = "#navbar-expler"> <H4 Id = "Fat">@Fat </H4> Pitchfork yr Enim lo-fi antes de vendê-lo. Tumblr Farm-to Table Rights Rights. Cardigan Anim Keffiyeh Carles. Velit Seitan McSweeney Booth 3 Wolf Moon Irure. Cosby Sweater Lomo Jean Shorts, Williamsburg Hoodie Minimum Qui Você provavelmente não ouviu falar deles Et Cardigan Trust Fund Culpa Biodiesel Wes Anderson Aesthetic. Nihil tatuou Accusamus, Cred Irony Biodiesel Keffiyeh Artisan Ullamco Freegan Bear Aliqua Cupidat McSweeney's Vero. Cupidat Four Loko Nisi, EA Helvetica Nulla Carles. Tattooed Cosby Sweater Food Truck, Vinil Quis Non Freegan de McSweeney. Lo-Fi Wes Anderson +1 Sartorial. Carles Exercício não estético Quis gentrify. Brooklyn adipisando a cerveja artesanal vice -keytar deserunt. FAP Craft Beer Deserunt Skateboard EA. Direitos da bicicleta Lomo apisicando Banh Mi, Velit EANT Sunt Nível Locavore Origin Coffee em Magna Venia. High Life Id Vinyl, Echo Park consequeiro Quis Aliquip Banh Mi Pitchfork. VERO VHS EST ENTIPISICAÇÃO. Consecteter Nisi DIY Minimum Messenger Bag. Cred ex in, sustentável Delectus consiste fanny pack iphone. </p> <h4 id = "dois"> dois </h4> <p> no parque de eco incididunt, o principal deserante McSweeney, mestre limpeza, thundercats Sapientte venia. Exceto VHS elit, Proident Shoreditch +1 Biodiesel Laborum Crave artesanal. Café de origem única WayFarers Irure Four Loko, Cupidat Terry Richardson Master Cleanse. Assume você provavelmente não ouviu falar da festa de arte Fanny Pack, tatuou o anúncio temporal do Nulla Cardigan. Proident Wolf Nesciunt Sartorial Keffiyeh eu Banh Mi Sustainable. Elit Wolf Voluptate, Lo-Fi Ea Portland antes de vender quatro Loko. Locavore enim nostrud mlkshk Brooklyn Nesciunt. Pitchfork yr Enim lo-fi antes de vendê-lo. Tumblr Farm-to Table Rights Rights. Cardigan Anim Keffiyeh Carles. Velit Seitan McSweeney Booth 3 Wolf Moon Irure. Cosby Sweater Lomo Jean Shorts, Williamsburg Hoodie Minimum Qui Você provavelmente não ouviu falar deles Et Cardigan Trust Fund Culpa Biodiesel Wes Anderson Aesthetic. Nihil tatuou Accusamus, Cred Irony Biodiesel Keffiyeh Artisan Ullamco SAPIETE Synth Id assumerenda. Ironia de clichê de Locavore sed helvetica, Thundercats que você provavelmente não ouviu falar deles, com capuz com capuz com alíquio FAP sem glúten. Labor Elit Place Antes de esgotar, Terry Richardson Proident Brunch Nesciunt Quis Cosby Sweat Pariatur Keffiyeh Ut Helvetica Artisan. Cardigan Craft Beer Seitan Readymade Velit. VHS Chambray Laboris Veniam temporário. Animollit Minimal Commodo Ullamco Thundercats. </p> </div> </div> <script src = "js/jQuery-2.0.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>Uso 1-- através do atributo de dados
Ao adicioná -lo à div para os elementos da página que você precisa ouvir (geralmente), mas adicionando -os à div, você pode ver o código sozinho. Em seguida, adicione o atributo data-spy = "roll" ao div para adicionar facilmente a função de escuta de rolagem à barra de navegação superior. Em seguida, adicione o atributo-alvo de dados, o valor desse atributo é o ID ou classe do elemento pai do componente .NAV em qualquer bootstrap.
Copie o código da seguinte
...........
</div>
O endereço do link de navegação deve ter um alvo correspondente
O endereço do link na barra de navegação deve ter o elemento de página correspondente com o mesmo valor de identificação.
Uso 2-- através de JavaScript
Comece a rolar a escuta via JavaScript:
<script type = "text/javascript"> $ (function () {$ ('. scrollspy-expler'). scrollspy ({target: '#navbar-expler'});}) </script>Remova sua propriedade de alvo de dados colocando a classe Style como uma divollspy-expler. Isso também permite trocar a roda do mouse.
2. Método
.ScrollSpy ('Refresh')
Ao usar o plug -in de escuta de rolagem, esse método precisa ser chamado sempre que um elemento de página é adicionado ou excluído do DOM na página, como segue:
Copie o código do código da seguinte forma: $ ('[data-spy = "scroll"]'). Cada (function () {var $ spy = $ (this) .scrollspy ('refresh')})
3. Opções
As opções podem ser passadas através de propriedades de dados ou JavaScript. Para atributos de dados, você precisa colocar o nome da opção após os dados, por exemplo, Data-offset = "".
4. Eventos
<script type = "text/javascript"> $ ('#navbar-expler').Por fim, observe: é claro, você precisa adicionar barras de rolagem ao conteúdo do monitoramento de rolagem, ou seja, você precisa adicionar estilos com antecedência.
<style type = "text/css"> .scrollspy-expler {altura: 200px; Overflow: Auto; Posição: relativa; borda: 1px vermelho sólido; } </style>Dê uma certa altura do DIV Content.
O exposto acima são as notas de aprendizado para rolagem de bootstrap e monitoramento de conteúdo relacionado. Se você ainda deseja continuar aprendendo o Bootstrap, clique aqui para continuar aprendendo. Espero que seja útil para o seu aprendizado. Espero também que você continue prestando atenção a um conteúdo mais emocionante do Wulin.com.