Hi @michelNice, I have gone through your question and let me try to explain you this effect with example using below code: index.html code:-

This example demonstrates how to shrink a header when the user starts to scroll the page.

Scroll down this frame to see the effect!

Scroll to the top to remove the effect.

Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

50 || document.documentElement.scrollTop > 50) { document.getElementById("header").style.fontSize = "30px"; } else { document.getElementById("header").style.fontSize = "90px"; } } => so as you see in the above code when scroll event happens in window object then window.onscroll event gets triggered and it calls a function called scrollFunction(); . => This function checks if body.scrollTop or documentElement.scrollTop is greater then some scroll amount like 50 in our case then the fontsize of header decreases and increases vice-versa. in your case instead of header you can use image and dynamically change its width from 90px to 30px as per your need. => hope this solution will be helpful to you. drop a comment if you got your solution.

Michel

All solutions

What do I need to improve on this one?

HTML & SASS

flex box