0

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.

houstonaspen
  • 65
  • 5
  • That doesn't sound like a common requirement to me - I think most use a CSS animation or something similar on resize, but I've never heard of it on scroll – Andrew Corrigan Apr 28 '22 at 13:27
  • Yes, I use CSS animation mostly but I feel it will be much smoother if it is tied to the user's scroll position. – houstonaspen Apr 28 '22 at 13:29
  • So, how big is the logo if you're trying to do it on scroll? – Andrew Corrigan Apr 28 '22 at 14:04
  • The logo is top left and about 300px wide in the header looking to size it down to 150px on scroll. – houstonaspen Apr 28 '22 at 18:47
  • 300px is quite wide - any particular reason why it needs to be so big on page load? Either way, I don't know if there's even a worthwhile way of getting it to smoothly resize on scroll. – Andrew Corrigan Apr 29 '22 at 06:50
  • There are plenty of sites that have a 300px wide logo. Also, plenty of sites have animations tied to the scroll position. I guess I'll touch upon my JS skills and post the solution ‍♂️ – houstonaspen Apr 29 '22 at 11:21
  • Not sure if this one helps: https://stackoverflow.com/a/69071143/13168911 – Andrew Corrigan Apr 29 '22 at 13:04

0 Answers0