I’ve seen the tutorials on how to have images show up when ‘on screen’ or the like but what about having an image ease in on a floating nav-bar when it scrolls to a certain section of the website, then eases out when it goes back to the top?
Example, I have this site I’m developing http://einclick.webflow.io/ which has the logo in the hero section. What I could like it to do is when the page scrolls to any other section, the logo appears in the nav bar section and look like the CSR page http://einclick.webflow.io/csr-statement
I’m still getting used to interactions but this seems to require some expertise from those who are more knowledgeable than I
Thanks, I saw it but it didn’t quite click that I could just apply the styling to an individual element instead of the whole nav bar,
Ok, I got it to kinda work. Because I have a fixed nav-bar, the the interation of teh logo appearing only work when the hero element is complete off the page, the logo doens’t show till the next section is fully on the page. Which means that the hero section is technically still on the page (just hidden behind the nav-bar).
I’m not sure what I should be adjusting to allow for the nav-bar height.
Ah, same thing for returning from another page as well it seems.
@dragondon agreed it would or you could have a very neat workaround and rather than applying it to the hero section apply it to an element (like some of the text on the hero page) OR even the original logo itself…
I also had to put a ‘blank’ section beneath my nav bar…when I clicked home, it was going to the hero section but not adding that padding above the hero section. strange but got that fixed too.
I have run into one snag. When I go to another page (CSR page) and return to any other section on the home page, the logo does not show. I’m guessing because the Hero section didn’t ‘scroll out of view’. Tht’s a bit of an issue.
Hmm, add another interaction to just show up on page load? But that would seem to contradict the initial pageload display none option.
