Изменение цвета шапки меню при прокрутке к блоку с таким же цветом

(function($) { 
  $(document).ready(function() { 
    function lpHeader() { 
      if ($(window).scrollTop() == 0) { 
        $('header').addClass('top'); 
      } else { 
        $('header.top').removeClass('top'); 
      } 
    } 
 
    lpHeader(); 
 
    $(window).on('load scroll', lpHeader); 
 
    let lpNav = $('header ul'); 
 
    lpNav.find('li a').on('click', function(e) { 
      let trgtSelector = $(this).attr('href'); 
      linkTrgt = $(trgtSelector); 
      if (linkTrgt.length > 0) { 
        e.preventDefault(); 
        let offset = linkTrgt.offset().top, 
          correction = linkTrgt.attr('data-offset') || 44; 
        $('body, html').animate({ 
          scrollTop: offset - correction 
        }, 750); 
      } 
    }); 
 
    window.onscroll = function() { 
      let black = $('.black-bg'); 
      let red = $('.red-bg'); 
      let navMenu = $(window).scrollTop(); 
      if (navMenu === 0) { 
        $(".header").css({ 
          "background": "rgba(0, 0, 0, 0)" 
        }) 
      } else if (navMenu === black.offset().top) { 
        $(".header").css({ 
          "background": "#211f20" 
        }) 
      } else { 
        $(".header").css({ 
          "background": "rgba(255, 255, 255, 0.5)" 
        }) 
      } 
    } 
  }); 
});

header { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  background: rgba(255, 255, 255, 0.5); 
  z-index: 100; 
} 
 
header ul { 
  margin: 0; 
  padding: 0; 
  text-align: right; 
} 
 
header ul li { 
  display: inline-block; 
} 
 
header ul li a { 
  display: inline-block; 
  padding: 10px; 
  font-size: 16px; 
  color: #211f20; 
  text-transform: uppercase; 
  transition: color .25s, padding .25s; 
} 
 
.black-bg { 
  background-color: #211f20; 
} 
 
.lp-content { 
  min-height: 500px; 
  padding: 40px 0; 
}

<header class="header"> 
  <div class="container"> 
    <ul> 
      <li><a href="#slideshow">Home</a></li> 
      <li><a href="#portfolio">Portfolio</a></li> 
      <li><a href="#about">About</a></li> 
    </ul> 
  </div> 
</header> 
 
<section id="slideshow" class="transp-bg"> 
  <div class="container1"> 
    <div class="lp-content"> 
      <div class="lp-slider1 owl-carousel"> 
        <img src="img/1.JPG" alt="Продукт 1"> 
        <img src="img/2.JPG" alt="Продукт 2"> 
        <img src="img/3.JPG" alt="Продукт 3"> 
      </div> 
    </div> 
  </div> 
</section> 
 
<section id="portfolio" class="section white-bg"> 
  <div class="container"> 
    <div class="lp-content"> 
      <h2>Portfolio</h2> 
    </div> 
  </div> 
</section> 
 
<section id="portfolio" class="section black-bg"> 
  <div class="container"> 
    <div class="lp-content"> 
    </div> 
  </div> 
</section> 
 
<section id="about" class="section red-bg"> 
  <div class="container"> 
    <div class="lp-content"> 
      <h2>About</h2> 
    </div> 
  </div> 
</section> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>