Como Tornar o Header Fixo com CSS e Rolagem Suave em JavaScript - Curso em Vídeo HTML5 e CSS3

Aula prática do Capítulo 29 do curso de HTML5 e CSS3: deixamos o menu superior funcional e fixo usando CSS (position: sticky, z-index) e um script JavaScript para rolagem suave, tratamento de links de navegação, identificação de IDs/classes e integração com o repositório (commit/push). Também há orientações sobre temas (botão tema) e cuidados ao editar o script entregue. 📌 Tópicos abordados 00:00 - Entrada e objetivo: menu superior funcionar e ficar fixo 00:21 - Continuação do projeto do portfólio 00:30 - O que já foi feito no projeto e próxima etapa 00:40 - Aviso: não é um curso de JavaScript completo 01:06 - Localizar e usar o arquivo JavaScript do pacote 01:26 - Mensagem do patrocinador Recode (recursos e cursos) 02:26 - Situação atual do projeto e responsividade parcial 02:37 - Análise do HTML e IDs das seções (ficha, skills, formação, projetos) 03:11 - Problema: links com hashtags que não funcionam corretamente 03:41 - Planejamento dos destinos do menu (ficha, skills, formação, projetos) 04:10 - Problema: menu some ao rolar; objetivo tornar header fixo 04:29 - Solução CSS: position: sticky e top:0 04:51 - Ajustes: z-index para sobrepor iframes e elementos 05:16 - Testes de interação: clicar e rolar para seções corretas 06:44 - Implementação JavaScript: seleção de links com classe .link 07:25 - Como atribuir classe .link às âncoras de navegação 08:11 - Lógica: evitar comportamento padrão e calcular offset do header 09:04 - Rolagem smooth e ajuste de 20px para compensar header 09:21 - Necessidade de ID para botão do tema (botao-tema) 10:01 - Verificação do menu funcionando em telas maiores e pequenas 11:12 - Observações sobre layout responsivo (duas colunas nas skills) 12:48 - GitHub Desktop: commit "menu funcionando" e push 13:05 - Testes no GitHub Pages e chamada para inscrição no canal 13:54 - Recap: menu está funcional; próximo vídeo: responsividade e modo tema 14:10 - Encerramento: convite para próxima aula e certificado O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo. Acesse o material de apoio em PDF: == GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf Receba notificações de novos vídeos: == Canal no Telegram: https://t.me/cursoemvideo Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3: == Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3: == Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3: == Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3: == Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT Consiga certificados fazendo o curso diretamente pelo site oficial do projeto: == Site: https://www.cursoemvideo.com Torne-se apoiador do projeto: == Acesse: https://www.cursoemvideo.com/apoie Siga-nos nas redes sociais: == Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara == Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo == Hostnet no Instagram: https://www.instagram.com/hostnetbr == Estudonauta no Instagram: https://www.instagram.com/estudonauta Conheça os patrocinadores desse curso: == HOSTNET: https://www.hostnet.com/cursoemvideo == RECODE: https://www.recode.org.br/novidades == ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo #cursohtml5css3 #modulo05 #C29A10