I have created a scroll able header, where while scrolling the page my main menu will disappear but a floating menu will appear on top. but I have a problem, while I scroll down, any item which goes into header area becomes unresponsive, means I can’t click or perform any action on those elements. please have a look below:
In above photo the dining table image is clickable at this position, but when I scroll down, this image will become unresponsive.
in above attachment, my floating menu appears after my cursor passed the anchor position, but the image gallery becomes unresponsive.
I am using the below code to appear/disappear the main menu and floating menu:
export function anchor1_viewportEnter(event) {
//Add your code for this event here:
$w("#hdrtextStrip2").show("fade");
$w("#hdrGrp").show("fade");
$w("#hdrGroup2").show("fade");
$w("#floatStrip1").hide("fade");
$w("#megamenuStrip").show("fade");
$w("#marqueeTxt").show("fade");
}
export function anchor1_viewportLeave(event) {
//Add your code for this event here:
$w("#hdrtextStrip2").hide("slide",slideOptions);
$w("#hdrGrp").hide("slide",slideOptions);
$w("#hdrGroup2").hide("slide",slideOptions);
$w("#floatStrip1").show("slide",slideOptions);
$w("#megamenuStrip").hide("slide",slideOptions);
$w("#livingmegaMenu").hide("slide",slideOptions);
$w("#bedroommegaMenu").hide("slide",slideOptions);
$w("#diningmegaMenu").hide("slide",slideOptions);
$w("#marqueeTxt").hide("slide",slideOptions);
}
Elements starting with hdr* are part of header.
Hi 
You just add a strip to your header and set it to be collapsed on load, and hidden on load, then add an onViewPortEnter() and onViewPortLeave() function to an element that can’t be seen while you can see the header, then set the strip to expand() then show() with a slide effect in the first function body " onViewPortEnter() ", and set them up to hide() then collapse() on " onViewPortLeave() ".
If you need help implementing this, drop down your site URL and your code formatted in a box (not screenshots), and a few screenshots would be great too.
Hope that helped~!
Ahmad
Thanks @Ahmad ,
I applied it and I think it is working as well. I just need to set onViewPortEnter() and onViewPortLeave() more judicially to make it more effective. I will update here once my page is ready.
You’re welcome Raman 
Okay, I’m awaiting your reply.
please have a look https://www.onestopfurniturestore.com/ . I am still trying to update it.
// For full API documentation, including code examples, visit https://wix.to/94BuAAs
Page option
let slideOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
//"intensity": "soft"
};
$w.onReady(function () {
//TODO: write your page related code here...
});
export function anchor1_viewportEnter(event) {
//Add your code for this event here:
$w("#hdrtextStrip2").show("fade");
$w("#hdrGrp").show("fade");
$w("#hdrGroup2").show("fade");
$w("#floatStrip1").hide("fade");
$w("#megamenuStrip").show("fade");
$w("#marqueeTxt").show("fade");
}
export function anchor1_viewportLeave(event) {
//Add your code for this event here:
$w("#hdrtextStrip2").hide("slide",slideOptions);
$w("#hdrGrp").hide("slide",slideOptions);
$w("#hdrGroup2").hide("slide",slideOptions);
$w("#floatStrip1").show("slide",slideOptions);
$w("#megamenuStrip").hide("slide",slideOptions);
$w("#livingmegaMenu").hide("slide",slideOptions);
$w("#bedroommegaMenu").hide("slide",slideOptions);
$w("#diningmegaMenu").hide("slide",slideOptions);
$w("#marqueeTxt").hide("slide",slideOptions);
}
Site Code
// For full API documentation, including code examples, visit https://wix.to/94BuAAs
import wixLocation from 'wix-location';
$w.onReady(function () {
//TODO: write your page related code here...
let url = wixLocation.url;
if (url === "/") {
$w("#floatStrip1").hide();
} else {
$w("#floatStrip1").show();
}
});
//$w("#floatbedroomMenu")
let bounceOptions = {
"duration": 500,
"delay": 0,
"direction": "top"
//"intensity": "soft"
};
export function image2_mouseIn(event) {
//Add your code for this event here:
$w("#searchBox1").show();
}
export function image2_mouseOut(event) {
//Add your code for this event here:
$w("#searchBox1").hide();
}
export function searchBox1_mouseIn(event) {
//Add your code for this event here:
$w("#searchBox1").show();
}
export function searchBox1_mouseOut(event) {
//Add your code for this event here:
$w("#searchBox1").hide();
}
export function floatBedroomIcon_mouseIn(event) {
//Add your code for this event here:
$w("#floatdiningMenu").hide();
$w("#floatlivingMenu").hide();
$w("#floatbedroomMenu").show("slide", bounceOptions);
}
export function floatBedroomIcon_mouseOut(event) {
//Add your code for this event here:
$w("#floatbedroomMenu").hide();
}
export function floatbedroomMenu_mouseIn(event) {
//Add your code for this event here:
$w("#floatbedroomMenu").show();
}
export function floatbedroomMenu_mouseOut(event) {
//Add your code for this event here:
$w("#floatbedroomMenu").hide();
}
export function floatlivingMenu_mouseIn(event) {
//Add your code for this event here:
$w("#floatlivingMenu").show();
}
export function floatlivingMenu_mouseOut(event) {
//Add your code for this event here:
$w("#floatlivingMenu").hide();
}
export function floatlivingButton_mouseIn(event) {
//Add your code for this event here:
$w("#floatdiningMenu").hide();
$w("#floatbedroomMenu").hide();
$w("#floatlivingMenu").show("slide", bounceOptions);
}
export function floatlivingButton_mouseOut(event) {
//Add your code for this event here:
$w("#floatlivingMenu").hide();
}
export function floatdiningMenu_mouseIn(event) {
$w("#floatdiningMenu").show();
//Add your code for this event here:
}
export function floatdiningMenu_mouseOut(event) {
//Add your code for this event here:
$w("#floatdiningMenu").hide();
}
export function floatdiningButtion_mouseIn(event) {
//Add your code for this event here:
$w("#floatbedroomMenu").hide();
$w("#floatlivingMenu").hide();
$w("#floatdiningMenu").show("slide", bounceOptions);
}
export function floatdiningButtion_mouseOut(event) {
//Add your code for this event here:
$w("#floatdiningMenu").hide();
}
export function menudiningButton_mouseIn(event) {
$w("#livingmegaMenu").hide();
$w("#bedroommegaMenu").hide();
$w("#diningmegaMenu").show("slide", bounceOptions);
}
export function menudiningButton_mouseOut(event) {
$w("#diningmegaMenu").hide();
}
export function diningmegaMenu_mouseIn(event) {
$w("#diningmegaMenu").show();
}
export function diningmegaMenu_mouseOut(event) {
$w("#diningmegaMenu").hide();
}
export function livingmegaMenu_mouseIn(event) {
$w("#livingmegaMenu").show();
}
export function livingmegaMenu_mouseOut(event) {
$w("#livingmegaMenu").hide();
}
export function menulivingButton_mouseIn(event) {
$w("#livingmegaMenu").show("slide", bounceOptions);
$w("#bedroommegaMenu").hide();
$w("#diningmegaMenu").hide();
}
export function menulivingButton_mouseOut(event) {
$w("#livingmegaMenu").hide();
}
export function bedroommegaMenu_mouseIn(event) {
$w("#bedroommegaMenu").show();
}
export function bedroommegaMenu_mouseOut(event) {
$w("#bedroommegaMenu").hide();
}
export function menubedroomButton_mouseIn(event) {
$w("#livingmegaMenu").hide();
$w("#bedroommegaMenu").show("slide", bounceOptions);
$w("#diningmegaMenu").hide();
}
export function menubedroomButton_mouseOut(event) {
$w("#bedroommegaMenu").hide();
}
export function floatStrip1_viewportEnter(event) {
$w("#tempstrip").expand();
$w("#tempstrip").show();
}
export function floatStrip1_viewportLeave(event) {
$w("#tempstrip").hide();
$w("#tempstrip").collapse();
}
Hey Roman
You don’t need to hide each and every element in the strip, hiding the strip (parent element) will also hide all of its children elements.
Also, you need to put the code only on the Site section , so that the code runs on every page, then determine whether the strip should be shown or hidden , I’ll give you an example:
Site Code Section
import wixLocation from 'wix-location';
let homePage = false;
$w.onReady(() => {
let baseUrl = wixLocation.baseUrl;
let url = wixLocation.url;
baseUrl === url ? homePage = true : homePage = false;
$w('#floatStrip1').onViewPortEnter((event) => {
if (homePage) { showStrip() }
})
$w('#floatStrip1').onViewPortLeave((event) => {
if (homePage) { hideStrip() }
})
});
async function showStrip() {
if (!$w("#floatStrip1").isVisible) {
await $w("#floatStrip1").expand();
await $w("#floatStrip1").show();
}
}
async function hideStrip() {
if ($w("#floatStrip1").isVisible) {
await $w("#floatStrip1").hide();
await $w("#floatStrip1").collapse();
}
}
I hope you have seen my website, where I need to keep header height large coz of mega menu display. I created a video and tried to show what I want to achieve.
Thank you for explaining the what you want to achieve, now I understand, hopefully 
You can delete the strip that’s causing the huge gap and overlapping over the other elements, the reason we introduced this strip is just to activate the the event handlers, so you can replace the strip with a small box (30px X 30px), and place it wherever you want on either the sides, make sure it’s transparent too.
Then create the view event handlers for this box, this way there won’t be anything overlapping over the page elements, and you’ll be able to open the mega menu and select the items inside it.
I afraid, I did not get it 
But Trying to do it.
Give it a shoot 
If you still need professional assistance you can send me a message using the links on my profile .
