Como criar Bootstrap 5 Scrollspy?

Pergunta

* Rede de conhecimento computador >> Pergunta >> PC Resolução de problemas >> Content

Criar uma navegação scrollspy no Bootstrap 5 é simples e fornece uma maneira fácil para os usuários navegarem em sua página da web. Veja como você pode conseguir isso:

Marcação HTML

1. Crie um elemento `

` para armazenar os links de navegação do scrollspy:

```html

```

2. Adicione um atributo `data-spy="scroll"` ao elemento `` para ativar a funcionalidade scrollspy.

```html

...

```

JavaScript

1. Inclui jQuery e a biblioteca Bootstrap JavaScript.

2. Adicione o seguinte código JavaScript para inicializar o scrollspy:

```javascript
$(função(){
$('corpo').scrollspy({
alvo:'#scrollspy',
deslocamento:20
});
});
```

- A opção `target` especifica o ID do elemento de navegação que contém os links scrollspy.
- A opção `offset` define a distância em pixels entre o topo da janela do navegador e o ponto onde a navegação do scrollspy se torna ativa.

Agora, à medida que uma página é rolada, o link ativo na navegação será atualizado automaticamente com base na seção correspondente que está visível na janela de visualização.

Lembre-se de substituir as seções `...` na marcação HTML por seu próprio conteúdo e links de navegação.

Anterior : Como criar popovers do Bootstrap 5?

Próximo : Como criar dicas de ferramentas do Bootstrap 5?

Os artigos relacionados

·	Como corrigir fotos pixeladas
·	Como excluir uma ramificação no Git usando 2 métodos…
·	Como adicionar e verificar site nas Ferramentas para we…
·	Como consertar um computador lento Criticamente Quando …
·	Como encontrar um vestido ou maiô na foto
·	Como verificar os níveis de tinta de impressora em Vis…
·	Como reinstalar o Soundmax Voltar para Windows XP
·	Tecnologia de orientação - artigos de instruções, g…
·	Quantos jogadores em Super Mario Bros.
·	Como particionar e formato HDD Fora de uma máquina

Artigos em destaque

·	Como restaurar os controles ActiveX
·	Como trabalhar em torno servidor enviou Certificado Exp…
·	Como exibir ocultos Opções arquivos no Windows Explor…
·	Como remover Sheur2.ldd
·	Como alterar emojis de sequência no Snapchat
·	Como converter de Nintendo Ultra 64 Formato de Som para…
·	Como remover a pasta de Cookies
·	Os melhores comandos do Google Home:como usar o Assiste…
·	Como remover uma barra de ferramentas Bluephone
·	Como Jogar VOB arquivos de vídeo com o Windows Media P…