Javascript 收缩并更改滚动上的背景导航栏

我试图使我的导航栏缩小，并改变背景颜色，只要我滚动。我尝试了在一个类似问题中提供的一些javascript解决方案，但它似乎不起作用。以下是我的html的外观：

切换导航

向我们展示您尝试的Javascript代码..抱歉。它来自另一个stackoverflow解决方案。$（窗口）.scroll（函数（）{if（$（文档）.scrollTop（）>150）{$（'.navbar'）.addClass（'shrink'）；}else{$（'.navbar'）.removeClass（'shrink'）；}）；你说它不起作用是什么意思？但这似乎是正确的。。我假设它是

收缩类

你也改变了

背景色

。你说它是收缩类是什么意思？我应该在导航栏的div类中添加shrink吗

Using Jquery and Css you can change the background color of navbar with scrolling:

 $(document).ready(function(){
  $(window).scroll(function() { 
    if ($(document).scrollTop() > 150) { 
      $('.navbar').addClass('shrink'); 
    } else { 
      $('.navbar').removeClass('shrink'); 
    } 
  }); 
 });

CSS for that:
.navbar{
   transition: background-color 0.5s ease;
   background-color: #f8f8f8;
}
.navbar.shrink{ 
   background: #dddddd 
}

change color as per your requirement.