Change header colour when scrolling

Hi,
Is it possible to change the header color, without having to activate the shrinking header?
Best regards,
Sebastian

Hi,
Thanks for your quick answer.
I want it to change its color once when i scroll down the page up to a certain point.
I’ll give you a page where I saw it in the private content.
It should not be shrinking at all if possible. And the text of the menu should change its color as well if that’s possible, too.

Okay, thank you for the tips. Unfortunately my programming skills aren’t good enough to do so, but maybe some day the will be!
Thanks a lot!

I tried both of these on my site and neither changed the color when scrolling down?

#top #header.header-scrolled .container.av-logo-container {
background: gold;}

#top #header.header-scrolled #header_main {
background: #88bbc8;}

with the new enfold – you can set the shrink amount to 10% – maybe Günter will be persuaded to include the 1% mark in the list there. In that case, a reduction would be hardly noticeable, and the classes would then be set anyway.

btw. i’m not willing to check pages that are not secured bei SSL ( TLS ) ;)

or leave the header as it is- no shrink and set your own scroll event on the header
this to child-theme functions.php:
you had to set in this calculation the rgb values!

function bg_color_on_scroll(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
(function($){
  var tStart = 30, // Start transition at 30px from top
      tEnd = 250,   // End at 250px
      cStart = [255, 255, 255],  // White
      cEnd = [255, 215, 0],   // Gold
      cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[2] - cStart[2]];

    $(".header_color .header_bg").css('background-color', 'rgb('+cStart+')');  // take over the start point

    $(document).scroll(function() {
        var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
        p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
        var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
        $(".header_color .header_bg").css('background-color', 'rgb(' + cBg.join(',') +')');
    });
})(jQuery); 
});
</script>
<?php
}
add_action('wp_footer', 'bg_color_on_scroll');

you see the parameters you can change? – the var values
and the selector ( .header_color .header_bg ) on the bottom might differ to yours – as mentioned above your page is not https.

Hi Guenni, do you know if there is a filter or anything to set a custom percentage? The list stops at 90%.

Try in your child-theme functions.php:

function custom_shrink_factor($shrink_factor){
  $shrink_factor = '95';
  return $shrink_factor;
}
add_filter('avf_header_shrink_factor', 'custom_shrink_factor');

because of avia-snippet-sticky-header.js :

const value = parseInt( shrink_factor );

Inserting fractional numbers therefore makes no sense

Perfect! Thanks a lot.