Direkt olarak detaylı açıklayamayacağım lakin, bu bu linke bakabilirsin. Bu benim işime yaramıştı, umarım yardımcı olur.

hangi dil ile çalıştığını bilmiyorum ama burada python ile bir örneği bulunuyor.

Kodunun tam nasıl bir şemaya sahip olduğunu ve hangi elemente böyle bir işlem uygulamaya çalıştığını bilmediğm için ekstra çok bir şey söyleyeeyeceği lakin büyük ihtimal ile blur uyguladığın elementin altındaki elementin rengi eğer tek bir renk ise otomatik olarak bir blur farkedilmeyecektir ki bu çok dolğal, tek bir renge uygulanan bir blur her yerde aynı renk görünümünü oluşturacağı için bir anlamı olayacaktır.

örnek olarak bu linkteki öreneğe bakabilirsin.
oradada görebileceğin gibi blurlanmış element en üste ve arkasında sadece beyaz arka plan varken bir blur efekti oluşmuyor ama aşağıya scroll ettiğinde yazıların üzerinde iken arkasında renk değişimleri olduğu için blur efekti belirgin hale geliyor.

eğer sabit bir elemente blur efekti vermek istiyorsan belki arka planına bir resim ekleyebilir yada bir graident uygulayabilirsin.

edit: linkte bir hata vardı güncelledim kusura bakma.

backdrop-filter: blur(2px)

bu kod ile arka planı blurlandırabilirsin , ama eğer arka plan renginin opacity si full ise blur yapmayacaktır dolayısı ile arka plana eklediğin rengin opacity dğerini belli oranda düşürmen gerek.

örnek olarak background-color:rgb(0, 0, 0 , 0.9);

<span id="blur">blurlanmış text</span>

#blur {

  filter: blur(5px);
  -webkit-filter: blur(5px);
  
}

Bu sorunu hangi dosyada yaşıyorsun bilmiyorum ama genel olarak bu problem dosyanın yolunun doğru okunamaması ve otamatik olarak default html dönmesinden kaynaklanıyor

Eğer problemin hayaklandığı dosyayı (ki static JS dosyalarından biri olduğunu düşünüyorum) ve dosya yolunu nasıl tanımladığını eklersen belki daha fazla yardımcı olabilirim.

Whatsapp'ın API'ı sana yardımcı olacaktır diye düşünüyorum. Bu link ile aradığın her şeye ulaşabilirsin: https://developers.facebook.com/docs/whatsapp

Bu kod yardımcı olacaktır

$("button").click(function(){
    var ss = document.styleSheets[0];
    ss.insertRule(`::-webkit-scrollbar {background-color: ${secilenrenk}}`, 0);
});

Sanırım bu istediğin özellik için Intersection Observer API veya Scroll eventlerini kullnabilisin.

Intersection observer api belirtilen element veya elementler scroll yapıldığında sayfada görünür hale geldiği zaman bir takım eylemler yapabilmeni sağlıyor.
bu sayede sayfada belirlediğin element görünür hale geldiğinde sidebardaki değişiklikleri yapabilirsin ama bu tabi yukarı scrollda tam istedim gibi çalışmayabilir.

Ayrıca bahsettiğim gibi scroll eventlerini kullanabilirsin Bootstrapta scrollspy diye bir özellik var ona benzer birşey yapmak istiyorsun anladığım kadarıyla

Direkt bootstrap kullanmak istersen direkt bu linke bakabilirsin
Vanilya JavaScript ile bir örnek: https://codepen.io/zchee/pen/ogzvZZ?editors=1010

not: ayrıca yukarıdaki cevabın sahibi arkadaşın biraz fazla tepki verdiğini düşünüyorum zira arkadaşın sorusuna cevap verilebiliyor görüldüğü gibi kod olmaması da bana biraz doğal geldi çünkü arkadaş nasıl bir teknoloji kullanacağını soruyor yani problem kodda değil konsepti bilmemesinden kaynaklanıryor. Derdim ters bir cavap vermek değil sadece kişinin hakkının yendiğini düşünüyorum.