Pour un site ‘one page’ il y a plusieurs challenges que l’ont peu maintenant régler en CSS

1. le menu sticky :→ (position: sticky;)
2. la hauteur ou vient se fixer l’ancre (derrière le menu). → (scroll-padding-top)
3. Le scroll qui doit être smooth. → (scroll-behavior)

Page d’exemple

One-Page tips

Étape 1 crée la structure avec les 3 premières features:

Voici les fichiers source pour démarrer :

1. Un fichier reset.css (c’est un reset et un miniframework avec des variables).
2. Le fichier HTML de base.
3. Et le fichier CSS de la structure sans les 3 features ci-dessus.

reset.css

index.html

style.css

Le CodePen intégrer :

Étape 2 les plus

D’autres comportements sont aussi cool à implémenter

1. Avoir des popups pour afficher plus de texte