Na to składa się kilka rzeczy, po pierwsze musisz mieć dwie klasy - jedną dla menu, które jest na górze (zwykły ostylowany div), drugą tak żeby to menu miało position fixed - menu będzie przyklejone w wyznazonym przez Ciebie miejscu (pewnie na samej górze). Następnie na podstawie scrolla w JS ustawiasz zmianę klasy - jeżeli scroll < Twoja wartość, nadajesz mu zwykłą klasę, natomiast w przeciwnym razie dajesz klasę z fixed.
Jeżeli chodzi o animację, wydaje mi się że w tym przypadku wystarczy zastosować transition dla wysokości i koloru - przy zmiane klasy opcja transition doda Ci porządaną animację (jeżeli chcesz zrobić coś bardziej wymyślnego, możesz użyć animation zamiast transition. Jeżeli chcesz się nauczyć animowania w CSS (podstaw), polecam tego Pana na YT -
https://www.youtube.com/watch?v=8kK-cA99SA0&list=PLqGj3iMvMa4LvJ8VctoXnPI0dtE40wfid.
Jeżeli będziesz miał jakieś problemy, w necie masz od groma różnych przykładów, wystarczy wpisać animationed sticky header/menu w google i masz.