Créer un menu « shrinked »
Par menu ‘shrinked‘, j’entends les menus qui se rétractent au scroll.
Le principe ici est d’utiliser jquery, pour qu’au delà d’une certaine limite au scroll, une nouvelle classe s’ajoute au menu.On part d’une certaine hauteur, ou d’un certain padding de base pour notre menu, et la nouvelle classe injectée par jquery et définie dans le css va modifier cette hauteur ou ce padding, en fonction de la hauteur définie dans notre fonction jquery.
On ajoute ensuite de l’animation css pour que cela soit plus agréable au visuel.
See the Pen shrink menu by yuyazz (@yuyazz) on CodePen.