I believe the simplest way is to transition the background-color property, and use rgba colours:

#top {
  height: 100vh;
  background-color: rgba(255, 255, 0, 1); /* Still yellow, but in rgba */
}

let opacity = 1 - (windowScroll / 770)
$socialDiv.css({
  'background-color': `rgba(255, 255, 0, ${opacity})`
});

I am using the following code to make my homepage to fade-out when scrolling down and fade-in when scrolling up. But I would like this effect to be applied only to the background colour (#top) and not to the text on it (.intro-top) Is it possible?

<!-- Fade Home Page -->
<script type="text/javascript">

var $socialDiv = $('#top');

$(window).scroll(function() {
  //Get scroll position of window 
  var windowScroll = $(this).scrollTop();

  //Slow scroll of home-page and fade it out 
  $socialDiv.css({
    'opacity': 1 - (windowScroll / 770) // Number of pixels to fade
  });
});

</script>

HTML:

<section class="full-height section-scroll" id="top">
     <div class="wow fadeInUp">
        <div class="intro-top">
           <h1>Lorem Ipsum - Lorem Ipsum</h1>
        </div>
     </div>
  </section>

CSS:

#top {
height: 100vh;
background-color: yellow;
}