• 29-03-2021, 19:55:14
    #1
    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.
  • 29-03-2021, 20:14:54
    #2
    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;
    }
  • 29-03-2021, 20:44:08
    #3
        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
  • 29-03-2021, 20:59:17
    #4
    enginbrcn adlı üyeden alıntı: mesajı görüntüle
    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;
    }
    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.
  • 29-03-2021, 21:48:56
    #5
    Theia sticky sidebar ile yapabilirsin
  • 30-03-2021, 13:44:01
    #6
    Bu kodlar muhtemelen işine yarayacaktır bir bak istersen

    https://codepen.io/UnluckySerivelha/pen/Nodzom
  • 30-03-2021, 17:41:21
    #7
    SkyGhostAir adlı üyeden alıntı: mesajı görüntüle
    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.
    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;
    }
  • 30-03-2021, 17:56:37
    #8
    mustafasatirogl adlı üyeden alıntı: mesajı görüntüle
    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.
  • 30-03-2021, 18:03:49
    #9
    Diğer taraf dediğin neresi bakalım ben anasayfa da eklediğimdr hiç bir sorunla karşılaşmadım