I am looking to gradually resize a logo on scroll position using Vanilla JS.

• Cannot use CSS in a stylesheet
• No use of jQuery
• Must gradually resize with scroll not all at once at a certain position.
• Use percentage.
• At 0px scroll position = 100% then if > 0px scroll position then percent width decreases.
• Logo not ever smaller than 50% Do not use css “max-width”.
• The javascript function should not continue to decrease the size on scroll after 50%.

For some reason, I have not been able to find any question that is doing this exactly but seems like a common need for websites that have a sticky header and need to decrease the logo size but not suddenly using a CSS class added via JS.