I’ve been asked to build a header which has a large logo (for an event) in the top left. As the user scrolls the idea is for that logo to be replaced with a small one which then remains there for the rest of the page.
One thought I had was to have the top navigation bloc scroll away and then have another bloc with a sticky class follow it up and stop but of course you’d see that rolling up the page. Another would be to try and play around with the margins so one element was superimposed on top of another and then revealed by the scroll. Ideally I’d like some sort of dissolve between the two. The designer would also like the search bar to change colour from white to black at the same time.
Any suggestions on how to go about it all would be gratefully received.