How to only change background color's opacity and not text within?

Highlighted
Explorer
167 2 8

I'm using Shopify to create my webshop and I created the following javascript function that makes the opacity of my header 0.5 when scrolling down:

 

window.onscroll = function() {scrollFunction()};

  function scrollFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {       $('.header-section').css("opacity", "0.5");
    } else {        $('.header-section').css("opacity", "1.0");
    }
  }

However when scrolling down, not only the background of the header will get the opacity 0.5 but the text and other elements within aswell.

Is there a way to only make the background's opacity 0.5?

My website is:

www.smartnutrition.nl or smartsnutrition.myshopify.com

Password to enter is: plazay

Thanks in advance

0 Likes
Highlighted
Shopify Partner
1777 211 370

Here is a snippet that would do a better job:

window.onscroll = function() {scrollFunction()};
  function scrollFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {       $('.site-header').css("background-color", "rgb(0, 0, 0, 0.5)");
    } else {        $('.site-header').css("background-color", "rgb(0, 0, 0, 1)");
    }
  }
Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Explorer
167 2 8

Hi this does not make the background transparant but it just lightens up the black color, look:

Knipsel.PNG

 

I want it to be transparant like this website:


https://dedicatednutrition.eu/?gclid=CjwKCAjwvtX0BRAFEiwAGWJyZFwQX-BXoI2zqFxGkVYS2VWV7raJ4H5b6LJJRVk...

 

Hope u got a solution for this aswell!

Thanks

0 Likes
Highlighted
Shopify Partner
1777 211 370

Change background-color to background.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Explorer
167 2 8

Hi, 

Still same affect as with background-color, also im not trying to change the site-header I'm trying to change entire header-section so menu background will be transparant aswell but thats just changing site-header into header-section. But background or background-color causes same effect, background will be grey instead of transparant..

U can check urself: 

www.smartnutrition.nl or smartsnutrition.myshopify.com

Password to enter is : plazay

0 Likes
Highlighted
Shopify Partner
1777 211 370

Apologies for back and forth, this is the snippet:

window.onscroll = function() {scrollFunction()};
  function scrollFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {       
$('.header-section').css("background", "rgb(0, 0, 0, 0)"); } else {
$('.header-section').css("background", "rgb(0, 0, 0, 1)"); } }
Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Explorer
167 2 8

Hi,

No problem, ur helpfull but this still does not work, with this code the background of the header remains black when scrolling.. Did u test urself?

0 Likes
Highlighted
Explorer
167 2 8

Anyone else? Still no solution..

0 Likes