Применить эффект затухания к основному контейнеру, но не к его содержимому с помощью jQuery

Question

Я использую следующий код, чтобы сделать мою домашнюю страницу постепенно исчезающей при прокрутке вниз и исчезающей при прокрутке вверх. Но я бы хотел, чтобы этот эффект применялся только к цвету фона (#top), а не к тексту на нем (.intro-top) Возможно ли это?

<!-- 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;
}

Answer 1

Я считаю, что самый простой способ - это передать свойство background-color и использовать rgba цвета:

#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})`
});