O plug-in Scroll Monitoring (ScrollSpy), ou seja, a atualização automática do plug-in de navegação, atualizará automaticamente o alvo de navegação correspondente de acordo com a posição da barra de rolagem. Sua implementação básica é adicionar a classe .Active à barra de navegação com base na posição da barra de rolagem enquanto você rola.
Se você deseja fazer referência à funcionalidade do plug -in separadamente, é necessário fazer referência a scrollspy.js. Ou, como mencionado no capítulo Visão geral do plug -in Bootstrap, você pode consultar o bootstrap.js ou versões compactadas do bootstrap.min.js.
1. Uso
Você pode adicionar o comportamento de escuta de rolagem à navegação superior:
1. Através do atributo de dados: adicione dados-spy = "rolagem" ao elemento que você deseja ouvir (geralmente corpo). Em seguida, adicione o atributo Data-Target com o ID do elemento pai do componente .nav ou a propriedade da classe. Para que funcione corretamente, você deve garantir que haja elementos no corpo da página que correspondam ao ID do link que você deseja ouvir.
<corpo data-spy = "roll" data-target = ". Navbar-expler"> ... <div> <ul> ... </ul> </div> ... </body>
2. Através do JavaScript: Você pode chamar o monitoramento de rolagem através do JavaScript, selecione o elemento a ser ouvido e depois chamar a função .scrollspy ():
$ ('corpo'). scrollspy ({target: '.navbar-expler'})
2. Monitoramento de rolagem
O plug-in de escuta de rolagem é usado para atualizar automaticamente itens de navegação com base na posição em que a barra de rolagem está localizada e exibir itens de navegação destacados.
// Exemplo básico <Nav ID = "Nav"> <a href = "#"> Desenvolvimento da Web </a> <ul> <li> <a href = "#html5"> html5 </a> </li> <li> <a href = "#bootstrap"> bootstrap </a> <li> <li> <mpan> </span> </a> <ul> <li> <a href = "#jquery"> jquery </a> </li> <li> <a href = "#yui"> yui </a> </li> <li> <a href = "#extjs> extjs </a> Data-offset = "0" Data-Target = "#NAV" Data-spy = "roll" style = "altura: 200px; Overflow: Auto; posição: relativa; preenchimento: 0 10px;"> <h4 id = "html5"> html5 </h4> <p> um aplicativo html sob a linguagem padrão "> Outros padrões foram deixados para trás. A fim de promover o desenvolvimento do movimento de padronização da Web, algumas empresas uniram forças para estabelecer um grupo de trabalho de tecnologia de aplicativos de hipertexto da Web (Organização da Web do Grupo de Trabalho de Tecnologia de Aplicativos de Hipertexto-Whatwg. Whatwg é dedicado aos formulários da Web e Aplicativos, enquanto o World Wide Wide Consortium. ID = "Bootstrap"> Bootstrap </h4> <p> Boots, do Twitter, atualmente é uma estrutura de front-end muito popular Fornece as especificações elegantes de HTML e CSS, escritas no idioma dinâmico CSS menos. [3] </p> <h4 id = "jQuery"> jQuery </h4> <p> jQuery é outra excelente biblioteca JavaScript após o protótipo. Não suporta mais o IE6/7/8. Separado do conteúdo HTML. Os cogumelos após uma chuva e são sobrecarregados id = "Extjs"> extjs </h4> <p> Extjs pode ser usado para desenvolver RIA, ou seja, aplicativos AJAX de clientes ricos. O ExtJS foi originalmente baseado na tecnologia YUI e foi desenvolvido pelo desenvolvedor Jackslocum
Existem dois atributos importantes, como mostrado na figura abaixo:
PS: Em um menu e um momento fácil, o alvo de dados também pode ser estável para realizar o monitoramento de rolagem destacando sem definir. Mas quando você não associa um deles quando várias navegações, isso causará um erro, por isso geralmente precisa ser adicionado.
Se você usar o método de script JavaScript, poderá remover os dados* e usar definições de atributo de script: deslocamento, espião e destino. Os métodos específicos são os seguintes:
// Defina a propriedade $ ('#Content'). Scrollspy ({offset: 0, Target: '#nav',});Há também um evento para mudar para uma nova entrada.
// Os eventos estão obrigados à navegação
$ ('#Nav').
alerta ('Este evento é acionado após a ativação de uma nova entrada!');
});
Há também uma maneira de atualizar o contêiner DOM na rolagem de escuta.
// parte html
<Section> <h4 id = "html5"> html5 <a href = "#" onclick = "removesec (this)"> exclua isso </a> </h4> <p> ... </p> </section>
// Ao excluir o conteúdo, atualize o DOM para evitar o desalinhamento do monitoramento de navegação
função removesec (e) {$ (e) .parents ('. sec'). remover (); $ ('#Content'). scrollspy ('refresh');}Nota: Este método deve usar dados-* declarativo.
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.