Créer une div positionnée absolue qui devient fixée sur le défilement - est-ce possible?

Question

J'avais cette idée pour un site Web de création d'une barre de navigation horizontale fixe qui fait simplement défiler le contenu lorsque vous appuyez sur les éléments du menu, mais je voulais avoir un div "Introduction" sur celui-ci avec une image d'arrière-plan et un logo, disons de 300px de hauteur qui s'affiche lorsque vous chargez la page pour la première fois.

Ainsi, la barre de navigation apparaîtrait attachée au bas de cette div "Introduction" et ce n'est que lorsque vous aurez fait défiler, elle deviendrait attachée en haut de la fenêtre et se positionne fixée lorsque vous faites défiler.

Si vous cliquez sur un certain élément de menu ou si vous faites simplement défiler jusqu'au début de la page, il s'attacherait à nouveau au bas de la div "Introduction".

Est-ce possible de faire simplement avec CSS ou devrais-je utiliser JavaScript pour réaliser cet effet?

Merci d'avance!

Answer 1

Je pense que vous aurez besoin de JavaScript pour celui-ci. Ce ne sera pas difficile cependant. La seule chose que vous devez faire est de changer de positionnement du menu à «corriger» lorsque le menu ferait autrement défiler de la fenêtre.