senin ihtiyacın olan şey ::webkit-scrollbar yani şöyle ki

/* scrollbar genişlik ve ve yükseklik */
::webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* scrollbar dışında kalan arka kısım */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* mouse ile basıp scroll işlemi yaparken çalışacak kısım */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* hover olduğunda çalışacak kısım */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

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.

Tayfun hocanın dün paylaştığı videoyu izledin mi bilmiyorum soru sorarken yaptığınız hatalar diye örnekler saymıştı. Aynı sorun sende de var kod yok bir şey yok sana nasıl yardımcı olalım reis ?