Make objects disappear when scrolling...

Ask the community
, ,
1

Hey guys,

again I am trying to achieve something special. I want to have an object on my page that fades out when reaching the header via scrolling. The header itself is transparent for showing the background image. But all content would just go through the header and be visible as well when scrolling. That would mess up the whole beautiful design of course… So, is there a way to make objects disappear when reaching the header section?

Thnx

2

Hi Jaeger,
You can accomplish that easily with the events onViewportEnter( ) and onViewportLeave( ) and by using the Function hide( )

Best,
-Luigi

3

I Have the same question, how would i enter that code?

4

Can someone pick this thread back up? I’m trying to apply this code to my page. Thanks.

5

Anyone have any idea how to implement this with Wix Code?

6

Guys can somebody help in doing this? What is the code we have to enter?

7

here is the code I used to make it happen

export function columnStrip5_viewportEnter(event) {
let fadeOptions = {
“duration”: 300,
“delay”: 1000,
};
$w(‘#image1’).hide(“fade”, fadeOptions)

}
export function columnStrip3_viewportEnter(event) {
let fadeOptions = {
“duration”: 300,
“delay”: 1000,
};
$w(‘#image1’).show(“fade”, fadeOptions)

}

I know that might be clunky but it disappears and reappears where I want it to.

8

Hi, I’m new to six and don’t really know much about coding. How do I go about adding this code to a menu on my six website?

9

@chydetetley

  1. activate DEV-MODE (developer-mode.
  2. see on bottom of every of your pages the code-section.
  3. Put in the code into this section.
  4. Go to —> PREVIEW or publish your website and see results on published website.
10

@russian-dima Hi thanks for the reply. I’ve tried doing that and changed the ‘#image1’ to ‘#verticalMenu1’ so it effects the menu, but when I try and preview it nothing happens.

11

@russian-dima

1188×666 59.7 KB

This is how I have it set-up, not sure if it’s right.

12

@chydetetley
Question-1: Which elements do you use? → Column-Strips?
Question-2: Did you modify the element-ID of each Column-Strip?
Question-3: Did you connect the code with your elements in the → property-panel?

And please do not use a → PIC <— to show your code, you can show your CODE in a ----> CODE-BLOCK…

13

@russian-dima
export function columnStrip2_viewportEnter ( event ) {
let fadeOptions = {
“duration” : 300 ,
“delay” : 1000 ,
};
$w ( ‘#box6’ ). hide ( “fade” , fadeOptions )

}
export function columnStrip3_viewportEnter ( event ) {
let fadeOptions = {
“duration” : 300 ,
“delay” : 1000 ,
};
$w ( ‘#box6’ ). show ( “fade” , fadeOptions )

}

Yes so the hover box that I am wanting to fade when scrolling is on columnstrip3 and columnstrip2 is above it. I realised I hadn’t changed the ID’s of the column strips after pasting the code so I have now done that but it still is doing anything. The code that I currently have is above.

14

@chydetetley

Try this one for —> #columnStrip3 & —> #box6

var fadeOptions = {"duration":300,"delay":1000,};

$w.onReady(()=>{
	$w('#columnStrip3').onViewportEnter(()=>{
		$w('#box6').expand()
		$w('#box6').show("fade",  fadeOptions)
	});

	$w('#columnStrip3').onViewportLeave(()=>{
		$w('#box6').hide("fade",  fadeOptions).then(()=>{
			$w('#box6').collapse()
		});
	});
});
15

@russian-dima That seems to have sort of worked, sometimes it works perfectly but sometimes it doesn’t show the hover box at all and you have to scroll back up and then back down for it to show.

16

@chydetetley I do not know your setup, because i can not see what you have in front of your eyes.

All you have to know is the difference between —>
—> show() and expand()
—> hide() and collapse()

And then you should ask yourself, when you want to show or hide?
And when you want to collapse or expand?

17

@russian-dima Ok yes I think I understand now, thank you!