Wix Studio Editor
I am hoping to make it so that my “header” logo fades away when scrolling but the “horizontal menu” remains at top of page. See the menu effects here for an example of what my client is looking for: Santa Barbara Hotel in Montecito CA | Rosewood Miramar Beach
I have spoken with 2 Wix agents and they said I will need to code for this, however I only know basic code and would be very grateful for some help please!! 
Your wished desire is possible to be done by code, that’s right, even if i could not find that functionality on your shown example site (mobile view)
Ok, got it… you are talking about this area here…
Expanded …
…and collapsed…
You can code this behaviour on your MASTER-PAGE.
What you will need is…
…or…an element, which will be acting like an event-trigger to tell when to show (expand) and when to hide (collapse) your logo in your header → related to → onVieportLeave() + onViewportEnter()…
Thank so much. I really appreciate your help! My coding skills are amateur at best and so I’m not sure how to actually input this into my website. 
Would I copy the code below and input the appropriate values to make it work for my site? This is probably above my paygrade. LOL. 
import wixWindowFrontend from ‘wix-window-frontend’;
// …
wixWindowFrontend.getBoundingRect()
.then( (windowSizeInfo) => {
let windowHeight = windowSizeInfo.window.height; // 565
let windowWidth = windowSizeInfo.window.width; // 1269
let documentHeight = windowSizeInfo.document.height; // 780
let documentWidth = windowSizeInfo.document.width; // 1269
let scrollX = windowSizeInfo.scroll.x; // 0
let scrollY = windowSizeInfo.scroll.y; // 120
} );
You can reach out to me here… → velo-ninja@outlook.com
I will do it directly on your page, will take about 30min and then i am out again.
All i need is an invitation to the site, you want to be modified.
ok, invite just sent. I’m putting my trust in you.
Enjoy your new function, i am out again. 
Check published site.
(Oh, forgot. Delete one of the implemented ANCHORS , the one which is not integrated inside generated code., forgot to remove.)
This was a simple setup → generating a simple HIDE & SHOW of specific ELEMENTS inside of your HEADER.
Wow, looks great! Thank you!! 
Are you saying I need to delete an ANCHOR or you already did?
No, i forgot.
You will find 2x ANCHORS, one of those can be deleted, because is not implemented inside code. You will find the code just below.
Select one of the ANCHORS → CHECK their ID, if the ID is not inside the code → you can remove the anchor. 1x anchor is enough.
Hi again! I accidentally deleted the anchor you created and lost the header scroll feature that you had put into my site. Any chance you would be up for helping me again? I REALLY APPRECIATE your help! 
Send me INVITATION again, if you did kick me already from your project.
If i am still part of your project, i will take a look later when i find free time (can take 2-days).
Ok sent. You rock!!!
I think all you need to do, is to add an ANCHOR back to the place where you have deleted it, since the code is still active. You will find inside your code → ‘anchor1’ which is red marked.
This is the missing element on your page.
On your H-Page… —> $w(‘#anchor1’) marked in → red !
$w.onReady(()=> {
$w('#anchor1').onViewportLeave(async()=>{
await $w('#txtTitle, #txtSubtitle').hide('fade'); $w('#txtTitle, #txtSubtitle').collapse();
});
$w('#section7').onViewportEnter(async()=>{console.log('ENTER');
$w('#txtTitle, #txtSubtitle').expand(); $w('#txtTitle, #txtSubtitle').show('fade');
});
});
Add an ANCHOR onto your H-Page —> (‘#anchor1’)
Ok I added it back to where I think it was placed before, however the scroll feature is no longer working. Do I need to make the “header scroll effect” something specific?
Yes, you re-added back the ANCHOR ! All good!
But… what ID does have the ANCHOR ?
Look onto the pictures and find the ERROR…
However, your menu works again. I did the changes for you.
Good luck and happy coding!
Did it work for you ?
Did you check the functionality?
Yes! It looks great. Thank you again! 
Another question… is it possible to make it so that this same function doens’t occur on mobile? I’d rather the logo stay in the header when someone is viewing mobile version.
Yes, take a look here…
