Menu bar with dynamically changing colors referencing the background

My first thought was to use the waypoints script. Enfold has on default implemented the waypoints script.
You can google to its functionality.

if you have defined for the color-section background-colors. You can use it to give that color to the header_bg background-color:
see here: https://webers-testseite.de/datenschutzerklaerung/

this comes to child-theme functions.php:

function header_bg_color_on_scroll() {
?>
<script>
    (function($) {
    var element_to_animate = $('.avia-section');

    element_to_animate.waypoint(function(direction) {
    if (direction === 'down') {
        var section_color = $(this.element).css('background-color');
          $('.header_bg').css('background-color', section_color);
        }
        }, {
          offset: '100px'
        });   
    element_to_animate.waypoint(function(direction) {
    if (direction === 'up') {
        var section_color_prev = $(this.element).prev().css('background-color');
        $('.header_bg').css('background-color', section_color_prev);
          }
        }, {
          offset: '100px'
        });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'header_bg_color_on_scroll', 9999);

The Offset depends on your header height in scrolled mode – so if you have a shrinking header it will be the end height after scroll.
You can test it yourself