Criando Div Posicionado Absoluto que se torna fixo no rolo - é possível?

Question

Eu tinha essa idéia para um site de criar uma barra de navegação horizontal fixa que simplesmente rola através do conteúdo quando você pressiona os itens do menu, mas eu queria ter uma "introdução" div em cima dela com uma imagem de fundo e um logotipo, digamos de altura de 300px que exibe quando você carrega a página.

para que a barra de navegação aparecesse ligada à parte inferior desta "Introdução" div e somente quando você rolou além, ficaria ligado ao topo da janela e ficou corrigido quando você rolou.

Se você clicou em um determinado item de menu ou se simplesmente percorreu o início da página, ele se conectaria à parte inferior da "Introdução" Div novamente.

É possível fazer simplesmente com CSS ou eu teria que usar o Javascript para atingir esse efeito?

Obrigado antecipadamente!

Answer 1

Eu acho que você vai precisar de javascript para este.Não será difícil, no entanto.A única coisa que você precisa fazer é mudar o posicionamento do menu para 'fixo' quando o menu iria rolar para fora da viewport.