Header show when hover

Ask the community
,
1

Hello guys . I did not find answeer on this, or maybe i don’t have corrects keywords (because i’m not english native).

I did a header with a menu. This is pinned and transition move up to 70%. So we can see a little bit of the header when i scroll down.

I’m looking for a way , when i move the mouse to the header (the 30% left on the top) it shows the header again.

I have started with the idea of a invisible container on this 30%, when the mouse is over this container the header drop down.

And so i started with this :thinking:(box13 is the container)

export function box13_mouseIn ( event ) {

I think it’s possible but i don’t know how. Can some give me help with this please ? :pray:

2

https://www.wix.com/velo/forum/coding-with-velo/hiding-header-and-footer-on-member-s-page

3

Hi, thanks a lot. It seems that what i’m trying if more “difficult” but i’m working with this for now.

4

I have started by writing this

$w . onReady ( function () {});

export function button1_click ( event ) { { show_Header ()}

function show_Header () { $w ( “#header1” ). children . forEach (( item , i ) => { item . expand ();})}

});

That’s what i feel, but i don’t know nothing about coding so i have no idea if this make sense.

The thing is that the header is hiding when scrolling the page (pinned, hiding transition 70% up)

5

Coding is always = loosing (your) time!

You will need something like …

$w.onReady(()=>{
	$w('#yourShowButtonIdHere').onClick(()=>{
		showHeader();
	});
	
	$w('#yourHideButtonIdHere').onClick(()=>{
		hideHeader();
	});
	
	$w('#yourExpandButtonIdHere').onClick(()=>{
		expandHeader();
	});
	
	$w('#yourCollapseButtonIdHere').onClick(()=>{
		collapseHeader();
	});
});

function showHeader() {
	$w("#header1").children.forEach((item) => {
		item.show();
	});
}

function hideHeader() {
	$w("#header1").children.forEach((item) => {
		item.hide();
	});
}

function expandHeader() {
	$w("#header1").children.forEach((item) => {
		item.expand();
	});
}

function collapseHeader() {
	$w("#header1").children.forEach((item) => {
		item.collapse();
	});
}
6

Oh thanks man, i’m going to work with this and try to understand it.

Yes you are right it’s loosing time anyway :blush:.

7

250×1017 11.7 KB

For now it’s not working at all. I 'm using this settings but i also tried whitout.

I tried to add

if( $w("#myElement").collapsed ) {
2  $w("#myElement").expand();
3}
4else {
5  $w("#myElement").collapse();
6}

But nothing changes. I’m still on it :blush:

8

I gave up :sweat:

I think my problem is that i checked the editor x option to collapse at 70% the header when scrolling down. And i don’t know what is the name of the header state then. Well, i guess it doesn’t matter if the header stay collapsed…

9

:joy: a good CODER —> NEVER GIVES UP !!!

What is your current state?
What is your current code?
Where did you paste your code (page or masterpage)?

What is the ID of your header?