dawn 15.0.2 - special effect on scroll...

Store Design
, , , , , ,
1

ok i have a code thats ok, but now exactly what I want. Im trying to replicate an effect on muimui.com

their big logo section seems to be a fixed svg? and header header scrolls up automatically on scroll down or up when the top of web[age is in view. guessing a 10px automatic scroll on mouse or finger.

Can someone have a look at my code and see if you can replicate the mui mui logo/header section so it’ll work on mine. Thanks

URL is www.rawqayos.com

    <script>
var headerHeading = document.querySelector('.header__heading-link');
headerHeading.style.opacity = '1';
headerHeading.style.display = 'none';

window.addEventListener('scroll', function() {
  if (window.scrollY > 10) {
    var sectionElement = document.querySelector('#shopify-section-sections--16023878140022__custom_liquid_TWfEKa');
    sectionElement.style.opacity = '0';
    headerHeading.style.opacity = '1';
    headerHeading.style.display = 'block';
  } else {
    var sectionElement = document.querySelector('#shopify-section-sections--16023878140022__custom_liquid_TWfEKa');
    sectionElement.style.opacity = '1';
    headerHeading.style.opacity = '0';
    headerHeading.style.display = 'none';
  }
});
</script>

<style>
  .header__heading-link, #shopify-section-sections--16023878140022__custom_liquid_TWfEKa {
    transition: opacity 0.6s ease;
  }
  .header__heading-link, #shopify-section-sections--16023878140022__custom_liquid_TWfEKa {
    transition: 0.6s ease;
  }
</style>
2

@xnyjyh , Please share your preview theme password. So that I will check and let you know the exact solution here.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.