Este artigo apresenta o monitoramento do Bootstrap Scroll para que todos aprendam. O conteúdo específico é o seguinte
Monitoramento de rolagem acompanhado pela rolagem de barras de rolagem, os itens da lista são constantemente comutados e ativados.
<!-id = "menu" é o objeto de escuta para dados de dados navbarbar-fixed-top na barra de navegação fixa-> <div> <div> <li> <a-! DOLDOWNDOWNU-Menu Dropdown-Menu Comportamento de pulldown de chamada-> <a href = "#" data-toggle = "suspenso" menu suspenso <b> </b> </a> <ul> <li> <a href = "#3"> LIST 3 </a> </li> <li> <a href = "#4"> list 4 </aa> 5</a></li> </li> </li> </div> </div><!-- data-spy="scroll" set data attributes for the listening object --><!-- data-target="#menu" set listen object --><!-- data-offset="30" set offset --><div data-spy="scroll" data-target="#menu" data-offset="30"> <h3 id="1">List 1 </h3> <p> <img src = "img/1.jpg"> </p> <h3 id = "2"> Lista 2 </h3> <p> <img src = "img/2.jpg"> </p> <h3 id = "3 lista 3 </h3> <p> <iMg" id = "4"> Lista 4 </h3> <p> <img src = "img/4.jpg"> </p> <h3 id = "5"> Lista 5 </h3> <p> <img src = "img/5.jpg"> </p> </div>
Monitoramento de rolagem
<body data-spy = "roll" data-target = "#navBar" data-offset = "0"> <div id = "navbar"> <ul> <li> <a href = "#1"> list1 </a> </li> <li> <a href = "#2"> list2 </a> <li> <li> <a href = "#" data-toggle = "suspenso"> menu suspenso <b> </b> </a> <ul> <li> <a href = "#3"> list3 </a> </li> <li> <a href = "#4"> list4 </a> </li> <li> <a li- li = "#4"> list4 </a> </li> <li> </ul> </div> <!-data-spy = "scroll" define atributos de dados para objetos de escuta-> <!-data-alget = "#menu" define objetos de escuta-> <!-Data-offset = "30" define o deslocamento-> <drc> <H3 Id = "1"> LIST 1 </ id = "2"> Lista 2 </h3> <p> <img src = "img/2.jpg"> </p> <h3 id = "3"> Lista 3 </h3> <p> <img src = "img/3.jpg"> </p> <h3 s = "4"> list 4 </h3> <h3 id = "5"> Lista 5 </h3> <p> <img src = "img/5.jpg"> </p> </div>
Estilo CSS
#navbar {position: corrigido; Direita: 10px; Top: 50px; Largura: 200px; Background-Color: #fff;}Chamado:
O primeiro: use o método de dados-spy = "roll", o acima é
O segundo tipo: use chamadas JS
Html apenas remove dados-spy = "roll"
$ (function () {$ ("corpo"). scrollspy (); // quando um novo item da barra de navegação é ativado, $ ("corpo"). "Block");Se você ainda deseja estudar em profundidade, pode clicar aqui para aprender e anexar um tópico maravilhoso a você: Bootstrap Learning Tutorial
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.