Is there a way to stop sticky header until Image Banner?

[randytheasian]

https://jsdqft-gs.myshopify.com/

[randytheasian]

Is there a code I can copy?

[Guleria]

Hello @randytheasian ,

Yes possible but not possible to provide instructions for it as it needs multiple changes.

If you are looking for an idea please follow:

1) Disable the default sticky feature.

2) Write JS which will add a fixed class to the header when it reaches a second second or specific position.

3) Assign css to the class which we added in step 2nd.

In this way the header will work as you need.

Problem solved don't forget to Like it and Mark it as Solution!
If you need help to implement it you can contact me for services

You can find the email in the signature below.

Regards
Guleria

[randytheasian]

Great, could you provide me the codes?

[PageFly-Kate]

Hi @randytheasian, 

This is Kate from PageFly - Landing Page Builder App.

You can try this code by following these steps:

• Step 1: Go to Online Store->Theme->Edit code.
• Step 2: Search file theme.liquid
• Step 3: paste bellow code in tag </body> -> save.

<script>
var elementToHide = document.querySelector('[data-sticky-type="reduce-logo-size"]'); 
var targetElement = document.getElementById("shopify-section-template--18249715876071__featured_collection_dExk9t");

window.onscroll = function () {
  const targetRect = targetElement.getBoundingClientRect();
  if (targetRect.top <= window.innerHeight / 2 && targetRect.bottom > 0) {
    elementToHide.style.display = 'block';
  } else {
    elementToHide.style.display = 'none';
  }
};
</script>

Hope that my solution works for you.

Best regards,
Kate | PageFly

[randytheasian]

Thanks for responding. Unfortunately, the slideshow banner is overlay the header and it doesn't stop before the banner. Any solution?