Bootstrap:你怎么能有一个顶层菜单的改变(即.将CSS从透明变为不透明)，当您滚动经过页面中的某个点时？

<nav class="navbar navbar-expand-lg navbar-light bg-light" data-spy="scroll" data-target="#main-content">
  <!-- 顶层菜单内容 -->
</nav>

$(document).ready(function(){
  $('body').scrollspy({ target: '#main-content', offset: 100 });
});

.navbar {
  background-color: transparent;
  transition: background-color 0.3s ease-in-out;
}

.navbar.scrolled {
  background-color: #ffffff; /* 设置不透明的背景颜色 */
}

$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $('.navbar').addClass('scrolled');
  } else {
    $('.navbar').removeClass('scrolled');
  }
});