how to change the header color while scrolling, in Accountra

Hi,

Yes you are correct there are no straightforward way to do it yet in Gutenverse. To do that, you cannot use css only and needed the use of javascript. I will briefly explain how to do it so please look at the code I provide.

<script>
    window.addEventListener("scroll", function(){
    var header = document.querySelector("header");
    header.classList.toggle("your-className", window.scrollY > 0);
    })
</script>

first you need to add additional css class for your header part. please look at the picture below.

Now in the javascript, you need to tell the windows to listen to the event “scroll” which means if any scrolling happens the windows will know.

now when there are any scrolls, tell the engine to look for an element with the class “header” and save it in the “var header” which is a variable named header. Then we will add an additional class with javascript, this class name can be anything you like, and better be something that you will easily recognize.

So, you only want to change the styling when the page is scrolled, so we tell the engine, to only add the class when the top of the page is not on top of the visible screen, hence “window.scrollY > 0” is applied.

Now it is set up, your header will have a new class added when the page is scrolled. So, you can do anything with the styling for the header using the added class in your custom CSS.

Note:

• you can add the script tag using the html block
• add the html block for the script and custom CSS inside the header part