Logo in header slide up when scroll down

Ask the community
,
1

Hi every one. I have a frozen header with the logo in the middle. Now I would like that the logo slides up a little when scrolling down the page. The logo also should be linked to get back to “home”, with a mouseover effect that will let slide down the logo.

Here’s an example: http://themes.opendept.net/retro-portfolio-4/#start

Could anyone help my out with some ideas how I should do this? Or even which code I could use for that? I’m really new in this and don’t have any idea.

Thanks for all feedbacks!

1 Like
2

I don’t think you’re going to be able to get the animation to work in Wix, but you can get a similar effect using a small modification of this tutorial.

You may be able to substitute the animation with some Wix supported ones like fadeOut.

Good luck!

3

Lool up “Code Queen Nayeli” on here and youtube. She has a tutorial called “Shrinking Sticky Header.” Totally awesome step by step, almost “for dummies.” Impossible to screw it up! She’s also usually good about following up with any questions.

4

Thanks for your help. I got it!

Here’s how I could fix it:

export function anchor1_viewportEnter(event) {
$w(‘#Logo3’).show();
$w(‘#Logo2’).hide();
$w(‘#Logo1’).hide();
}

export function anchor1_viewportLeave(event) {
$w(‘#Logo3’).hide();
$w(‘#Logo2’).show();
}

export function Logo2_mouseIn(event, $w) {
$w(‘#Logo1’).show();
$w(‘#Logo2’).hide();
}

export function Logo1_mouseOut(event, $w) {
$w(‘#Logo2’).show();
$w(‘#Logo1’).hide();
}