Show fixed vertical logo at scroll position

Hello, I seem to be having trouble getting a vertical logo to hide and show correctly across my pages. Functionality seems to be working on the home page, but navigating to link #2 the vertical logo will show off-the-bat, instead of revealing at later point. I am assuming it has something to do with page offset, but not quite sure.

I’ve also got some weird link animation and current state behavior that isn’t quite working as well.


Here is my site: Link here

I do not see an issue with your logo. WOrks fine on scroll.

WHat browser are you using?

It’s working fine on the landing page, however; navigating to link two - the logo is showing right away. I’m using chrome.

Ok, so which logo do you not want to show on link two? The top or left logo?

The left logo should only show if it’s a longer scrolling page at a particular point down the page.

Are you using symbols for your header/logo?

However, I didnt see an issue with it on my end.

Left logo only showed when I was scrolling on the 2nd link

I believe the second page is too short, so the percentage set for the logo to fade in is considered way early in the page. For example, if the landing page is 2000px high and you set a 50% threshold for the logo to appear, it would do so at pixel 1000. However if page 2 is 400px high then it will trigger at pixel 200, which is already visible when you enter the page.

Add more content to page 2 and see if it fixes the issue.

1 Like

Good thought @fernando1lins

Ah, this makes sense… Any suggestions for how to not show on pages that either are smaller or do not scroll at all?

I guess you could change the rule to another percentage, or add a class that sets the visibility of the logo to hidden in the pages that you know will be short.

2 Likes