Recreate this sticky header effect

Are you trying to create this using a page builder or in a custom template?

The code is pretty simple in theory.. Watch for scroll value, if the scroll value you higher than 50, apply a class to your nav bar that adjusts the background opacity.

<nav/>

// style
<style>
body { min-height: 200vh; }

nav {
position: fixed;
background: rgba(255,255,255,0);
height: 50px;
width: 100%;
transition: all ease-in-out 1000ms;
}

nav.fade-in { background: rgba(255,255,255,1); }
</style>

// logic
<script>
let scrollpos = window.scrollY
const header = document.querySelector(“nav”)
const header_height = header.offsetHeight

const add_class_on_scroll = () => header.classList.add(“fade-in”)
const remove_class_on_scroll = () => header.classList.remove(“fade-in”)

window.addEventListener(‘scroll’, function() {
scrollpos = window.scrollY;

if (scrollpos >= header_height) { add_class_on_scroll() }
else { remove_class_on_scroll() }

console.log(scrollpos)
})
</script>