Got it to work after deleting the initial hide and show events. Here's the working code... $w.onReady(function () { $w("#anchorHeader").onViewportLeave(() => { let fadeOptions = { "duration": 300, "delay": 0 }; $w('#translucentHeader').show("fade", fadeOptions); $w('#transparentHeader').hide("fade", fadeOptions); }) $w("#anchorHeader").onViewportEnter(() => { let fadeOptions = { "duration": 300, "delay": 0 }; $w('#translucentHeader').hide("fade", fadeOptions); $w('#transparentHeader').show("fade", fadeOptions); }) })

I'm still not getting this to work, even after adding an anchor as a trigger point. Any ideas how to troubleshoot? I've tried this several different ways with no luck. Here's the code I'm using now. Is something wrong with my syntax? $w.onReady(function () { $w('#translucentHeader').hide(); $w('#transparentHeader').show(); }); $w("#anchorHeader").onViewportLeave(() => { let fadeOptions = { "duration": 300, "delay": 0 }; $w('#translucentHeader').hide("fade", fadeOptions); $w('#transparentHeader').show("fade", fadeOptions); }) $w("#anchorHeader").onViewportEnter(() => { let fadeOptions = { "duration": 300, "delay": 0 }; $w('#translucentHeader').show("fade", fadeOptions); $w('#transparentHeader').hide("fade", fadeOptions); })

Thanks! Just to clarify, I'm using the (empty) header as the trigger point in the code above. Is that no longer a valid element to use as a trigger point?

In the header properties, onViewportEnter sends a "header_viewportEnter" event, and onViewportLeave sends a "header_viewportLeave" event. Should I be putting something in the #translucentHeader and #transparentHeader properties too?

Oops. Forgot to take the data collection live. Should work now... https://aaronhelgeson.wixsite.com/mysite/Music/Calls-of-close-and-away

I'm doing a new version of my site from scratch, so it'll take a while to build access to the dynamic page. I just tried a simple link from the home page, but that doesn't seem to work (the link is "MUSIC" up at the top)... https://aaronhelgeson.wixsite.com/mysite I was mostly just trying to play around with Wix Code to see if I could make a dynamic audio player. Not sure if this is gonna work, though.

Thanks. Tried that but didn't work. Not sure what the issue is. Maybe Wix is using something else for the audio player ID? Or maybe it won't work in Preview and I have to publish? (Thanks for your patience with a beginner.)

Right. I've got something like that in the JS portion of my component code above, but I need to connect the data it pulls to the audio player in the HTML portion. Not sure how to code that.

Thanks, Itai. That would get the player in there, but what I'm after is how to have the HTML Component connect the audio URL it's retrieved from the Page Code (via Javascript) with the HTML markup for the player. That way, the player will draw the URL dynamically from my data collection, letting me use a single dynamic page. I'm also still not quite sure how to change the style attributes of the player. Basically, I'm looking for this (with both play and pause controls)...

Is there a way to alter Mateus' HTML component above to display simple audio controls, rather than autoplay on page load? Preferably would include style markup, but even the browser controls would be better. Here's Mateus' code again for reference...