Angular 10 Dynamic header : when scrolling, change displayed header value when it enters in collision with an another non fixed header

Question

I am using angular 10 with angular material. When scrolling, I would like to make my sticky header change it\'s display value when it enters in collision with a non fixed on