الخاصية data-bs-spy لا تعمل

سبب المشكلتين معاً هو الخاصية overflow-x : hidden المطبقة على body حيث أن هذه الخاصية تجعل الموقع غير قابل لل scroll  من ناحية الجافاسكريبت إذاً الكود التالي لا يتم تنفيذه

$(window).scroll(function () {
  if ($(this).scrollTop() >= 400) {
    $("#navbar").addClass("noTransparent");
  } else {
    $("#navbar").removeClass("noTransparent");
  }
});

لذلك عند حذف الخاصية overflow-x : hidden من ال body 

html,
body {
  overflow-x: hidden; /*  احذف هذا السطر*/
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

وستظهر لديك مشكلة ظهور ال scrollbar ولإخفاءه قم بتطبيق الخاصية overflow-x : hidden على ال html كمايلي

html{
  overflow-x: hidden;
}

بعد هذه التعديلات سيتم حل المشكلتين معاً