Trade Theme - Want Sticky Header to have 0.9 transparency on scroll down.

[SASD]

We are using the Trade Theme (15.0) with a the Sticky Header - "Always Reduce Logo Size"

We want the sticky header to have some transparency when you scroll down, basically when it reduces the logo size on scroll down that it also adds some transparency to the header, so its not so in your face anymore.

[BSSCommerce-TA]

Hi @SASD , you can change header's transparency on scroll down by following these steps: 

1. Navigate to Online store => Themes => Edit code

2. Find theme.liquid file and add this code snippet before closing head tag : 

    <script>
      window.addEventListener('scroll', function() {
          var header = document.querySelector('sticky-header .header');
          if (window.scrollY === 0) {
            header.style.opacity = '1';
          } else {
            header.style.opacity = '0.9';
          }
      });
    </script>

We're happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.

[SASD]

Thank you for trying to help @BSSCommerce-TA 

Unfortunately, I put that in and it didn't work. Not sure if there are changes with v15.0 of the them that just came out.

This is what I ended up with, I also did something that makes the padding smaller at the same time.

{% ########### Personal Changes ########### %}
    <script>
      {% ########### Transparent Header on Scroll ########### %}
      window.addEventListener('scroll', function() {
          var header = document.querySelector('.header-wrapper');
          if (window.scrollY === 0) {
            header.style.opacity = '';
          } else {
            header.style.opacity = '0.9';
          }
      });

      {% ########### Header Menu Padding smaller on Scroll ########### %}
      window.addEventListener('scroll', function() {
          var menu = document.querySelectorAll('.header__menu-item');
          if (window.scrollY === 0) {
            for(var i = 0; i < menu.length; i++) {
              menu[i].style.paddingTop = '';
              menu[i].style.paddingBottom = '';
            }
          } else {
            for(var i = 0; i < menu.length; i++) {
              menu[i].style.paddingTop = '0.8rem';
              menu[i].style.paddingBottom = '0.8rem';
            }
          }
      });
</script>

Do you see any issues with how I've done this, or how I could do it better? 

[SASD]

I did some more trial and error and found this to work.

<script>
window.addEventListener('scroll', function() {
          var header = document.querySelector('.header-wrapper');
          if (window.scrollY === 0) {
            header.style.opacity = '';
          } else {
            header.style.opacity = '0.9';
          }
      });
</script>

Question, I'm trying to get the padding to go from the normal 1.2rem to 1.0rem on scroll as well just to reduce the size of the sticky menu. When I adjust the above script it only adds the style tag to the first menu item. Is there a way to adjust all of the menu items with the  header__menu_item class? Sorry its been a long time since i programmed, need to get back into it. Guessing i need to do an array or something?

[BSSCommerce-TA]

It's great that you've found a way to make it work.

With your question, you need to identify if there are any commonalities among the menu items you've selected, such as matching the class name 'header-wrapper-items'.
Then, you use var header-item = document.querySelectorAll('.header-wrapper-items'); which returns a NodeList.

Convert it to an array:
let myArray = Array.from(header-item). Then, map through myArray to access each item:

myArray.map((item, index) => {
item.style.height = '1rem'; // Assuming 'height' is the property you want to change
})

And you place this code snippet inside the event listener for the window scroll event.

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

[tim]

If you want some transparency when logo gets smaller then you can add this to the "Custom CSS" under "Theme settings":

.section-header {
  transition: opacity .3s cubic-bezier(.52,0,.61,.99);
}
.scrolled-past-header:not(:hover) {
  opacity: 0.5;
}

Change the opacity value to your liking.

Probably no what you want, but it's also possible to change transparency only when actually scrolling, but this will require some JS coding.

[SASD]

Oh I like this, yeah the scrolling doesn't matter. Its more that it happens at the same time as when the logo gets smaller when we scroll down.

Our header is a bit in your face for it to be there the whole time as a sticky header, IMO. Its for my daughters candle business so the header is Pink, but once you scroll down its too much for my liking. So wanted some transparency to soften it, and also now looking to change the menu padding top&bottom to make it a bit smaller.

I've got it working in JS but I like your method. Is there any way to transition/change the padding for the menu at the same time?