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 Receive SMS online on sms24.me

Watch on YouTube

Subscribe on YouTubeReaderBot

TubeReader video aggregator is a website that collects and organizes online videos from the YouTube source. Video aggregation is done for different purposes, and TubeReader take different approaches to achieve their purpose.

Our try to collect videos of high quality or interest for visitors to view; the collection may be made by editors or may be based on community votes.

Another method is to base the collection on those videos most viewed, either at the aggregator site or at various popular video hosting sites.

TubeReader site exists to allow users to collect their own sets of videos, for personal use as well as for browsing and viewing by others; TubeReader can develop online communities around video sharing.

Our site allow users to create a personalized video playlist, for personal use as well as for browsing and viewing by others.

@YouTubeReaderBot allows you to subscribe to Youtube channels.

By using @YouTubeReaderBot Bot you agree with YouTube Terms of Service.

Use the @YouTubeReaderBot telegram bot to be the first to be notified when new videos are released on your favorite channels.

Look for new videos or channels and share them with your friends.

You can start using our bot from this video, subscribe now to Como Tornar o Header Fixo com CSS e Rolagem Suave em JavaScript - Curso em Vídeo HTML5 e CSS3

What is YouTube?

YouTube is a free video sharing website that makes it easy to watch online videos. You can even create and upload your own videos to share with others. Originally created in 2005, YouTube is now one of the most popular sites on the Web, with visitors watching around 6 billion hours of video every month.