Yapışkan Sidebar Nasıl Yapabilirim?

Kedi Cinsi sitesinin sol tarafında bulunan filtrelerin yapışkan olmasını istiyorum ancak üstten xx px inilince üstten ekrana yapışacak, bunu nasıl yapabilirim? Direk position: fixed; verince haliyle üstteki boşluk kadar boşluk kalıcı oluyor, bunu istemiyorum.

Not: Sanırım sayfada xx miktar inildikten sonra o ID'ye ya da Class'a position: fixed; vermek gerekiyor? Bunu nasıl yapacağımı bilmiyorum.

position: fixed sadece ekranda istediğin yere (belirli koordinatlara) sabitlemeye yarar. Eğer doğru anladıysam senin istediğin için position: sticky daha uygun. Bir dene, umarım işine yarar.

.sidebar {
  position: -webkit-sticky; /* safari için */
  position: sticky;
  top: 0;
}

    window.addEventListener("scroll", () => {
     if (scrollY > 100) {
       document.querySelector(".cat-breeds-left").style.cssText = "position: fixed; top:10px";
     }else{
      document.querySelector(".cat-breeds-left").style.cssText = "position: static; top:initial";
     }
    })

body üstüne script tagı içine ekleyiniz, önce dosyanızın yedeğini almayı unutmayın

Evet aradığım buymuş, web'de örnek kullanımlara da baktım ancak benim sitede işe yaramadı. Nedenini almadım. "cat-breeds-left" class'ına ekledim tepki yok.

Theia sticky sidebar ile yapabilirsin

Bu kodlar muhtemelen işine yarayacaktır bir bak istersen

https://codepen.io/UnluckySerivelha/pen/Nodzom

Sende çalışmamasının sebebine baktım. Form'a sticky özelliğini ve form'un kapsayıcısına da display:flex, flex-wrap:wrap; vermen gerekiyor. Çünkü kapsayıcısının height ı yüksek kalmakta. Aşağıdaki css kodunu yazarsan sorun çözülecek.

@SkyGhostAir;

.entry-content {
    display: flex;
    flex-wrap: wrap;
}
.cat-breeds-left form {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

Ekledim ancak kaç yaparken göz çıkardık sanırım diğer taraf baya bir bozuldu şu an.

Diğer taraf dediğin neresi bakalım ben anasayfa da eklediğimdr hiç bir sorunla karşılaşmadım