Jquery 如何使导航栏在向下滚动页面时改变颜色？

我希望导航栏是透明的，但是当你向下滚动页面时，它会变成红色

<div class="nav">
      <div class="container">
       <div class="logo">
       <a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a>
       </div>
        <div class="navMain">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
      </div>
    </div>

类似这样的内容：

---

如果有人想寻找非jquery解决方案（vanilla js），请看以下内容：

document.addEventListener("DOMContentLoaded", function () {
    var scrollStart = 0;
    var nav = document.querySelector(".nav");
    var offset = navbarElement.getBoundingClientRect();

    document.onscroll = function (e) {
        scrollStart = e.target.scrollingElement.scrollTop;
        if (scrollStart > offset.top) {
            nav.style.background-color, rgba(34,34,34,0.9);
        } else {
            nav.style.background-color = "transparent";
        }
    };
});

解决方案由OP

Jquery

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('.nav');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.nav').css('background-color', 'rgba(34,34,34,0.9)');
       } else {
          $('.nav').css('background-color', 'transparent');
       }
   });
});

CSS

---

这将使您的导航变得透明，当您滚动时，导航将变为rgba（34,34,34,0.9）

谢谢。您知道如何使其褪色而不仅仅是显示吗？添加CSS转换属性，如下所示：。如果我的答案有用的话，请把它标记为正确。谢谢你花时间回答这个问题。我在Jquery:$（document）.ready（function（）{var scroll\u start=0；var startchange=$（'.nav'）；var offset=startchange.offset（）；$（document）.scroll（function（）{scroll\u start=$（this）.scroll top（）；if（scroll\u start>offset.top）{$（'.nav'）.css（'background-color'，'rgba（34,34,34,0.9）；}else{$（'.nav'）.css（'background-color'，'transparent'）；}}}）；很抱歉，我不能投票支持你的答案，它说我没有15岁的声誉。但我非常感谢你的时间和帮助。很抱歉，我发布了jsfiddle链接，但我忘了保存更改。检查此链接：

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('.nav');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.nav').css('background-color', 'rgba(34,34,34,0.9)');
       } else {
          $('.nav').css('background-color', 'transparent');
       }
   });
});

.nav {
transition-duration: 1s;
}