Have an image show up in nav bar on scroll?

Hey All,

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 :smile:

1 Like

Hi @DragonDon, this can be achieved using interactions: http://interactions.webflow.com/. I would recomend this video: http://interactions.webflow.com/fade-in-navbar-video but instead of an entire nav you just have your logo fade in when the header fades out.

Let me know if this works,

Arthur

Hi @Arthur,

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.

Maybe this would work better on clicking another nav link instead of trying to figure out spacing on the hero section?

i.e. have the logo appear based on a click rather than page location. Would solve the ‘figuring out’ part I think

Eww, tried that…that got messy real quick. Ok, so back to spacing issue when the hero section doesn’t quite go ‘off’ screen.

@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…

Arthur

Got it! I set that little ‘offset’ to 5% in the ‘scroll out of view’ area!

Screenshot: https://gyazo.com/f834ff85d81bc7a89c441ce617628032

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.

1 Like

Brilliant! :smile: the site looks good, let me know when it’s done or if you need any more help :smile:

Arthur

Thanks @Arthur

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.

Any suggestions there?

@DragonDon I was dealing with a similar issue for my site riaz.london, which you can look at here: https://webflow.com/website/Riaz-Farooq-ias99new

I can definitely fix it but can I see the read only link so I can visualise it? How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow

It is a multi staged interaction and is definitely do able…

Arthur

Hi @Arthur

Thanks, and sorry. Thought I had put that link in this thread:

https://preview.webflow.com/preview/einclick?preview=66d86a2f153450d4e0429baf04714cf4

The other side looks rather complicated. Not a site I personally would ever use…but as long as the client is happy, that’s all that matters :smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.