"Position: sticky;" CSS ve HTML çalışmıyor

Gezinti Çubuğu'nu kaydırdığımda en üste yapışmasını sağlamak istiyorum, ancak çalışmıyor ve nedenini bilmiyorum. Lütfen yardımcı olabilirseniz, HTML ve CSS kodum burada:

.nav-selections {
        text-transform: uppercase;
        letter-spacing: 5px;
        font: 18px "lato",sans-serif;
        display: inline-block;
        text-decoration: none;
        color: white;
        padding: 18px;
        float: right;
        margin-left: 50px;
        transition: 1.5s;
    }

        .nav-selections:hover{
            transition: 1.5s;
            color: black;
        }

    ul {
        background-color: #B79b58;
        overflow: auto;
    }

    li {
        list-style-type: none;
    }
<nav style="position: sticky; position: -webkit-sticky;">
        <ul align="left">
            <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
            <li><a href="#/about" class="nav-selections">About</a></li>
            <li><a href="#/products" class="nav-selections">Products</a></li>
            <li><a href="#" class="nav-selections">Home</a></li>
        </ul>
    </nav>
Programlama
html css
2017ösp43ös13 Nisan 2017 в 1:43
2 görünümler

Bir ata öğenin taşma ayarına sahip olup olmadığını kontrol edin (örneğin overflow:hidden); değiştirmeyi deneyin. DOM ağacında beklediğinizden daha yukarı çıkmanız gerekebilir =).

Bu, alttaki bir öğe üzerindeki position:sticky özelliğinizi etkileyebilir.

LGSon
Edited answer 2018ööp41öö6 Kasım 2018 в 6:41
Yorumlar (9)
Çözüm

Yapışkan konumlandırma, göreli ve sabit konumlandırmanın bir karışımıdır. Öğe, belirli bir eşiği geçene kadar göreli konumlandırılmış olarak değerlendirilir ve bu noktada sabit konumlandırılmış olarak değerlendirilir.
...
Yapışkan konumlandırmanın beklendiği gibi davranması için üst, sağ, alt veya sol seçeneklerinden en az birini içeren bir eşik belirtmelisiniz. Aksi takdirde, göreli konumlandırmadan ayırt edilemez. [kaynak: MDN]

Dolayısıyla, örneğinizde, top özelliğini kullanarak sonunda yapışması gereken konumu tanımlamanız gerekir.

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
Marvin
Edited answer 2017ösp26ös17 Eylül 2017 в 5:26
Yorumlar (4)

benim yorumumdan:

position:sticky nereye yapışacağını söylemek için bir kordonata ihtiyaç duyar

nav {
  position: sticky;
  top: 0;
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

body {
  height: 200vh;
}

  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>

FF ve Chrome dışındaki diğer tarayıcılar için polyfill kullanımı mevcuttur. Bu, tarayıcılar aracılığıyla herhangi bir zamanda uygulanabilecek veya uygulanamayacak deneysel bir kuraldır. Chrome bunu birkaç yıl önce ekledi ve sonra bıraktı, geri döndü gibi görünüyor ... ama ne kadar süre için?

Bunu bir javascript betiğine dönüştürmek isterseniz, en yakını position:relative + yapışkan noktaya ulaşıldığında kaydırma sırasında güncellenen koordinatlar olacaktır

G-Cyr
Edited answer 2019ösp54ös17 Temmuz 2019 в 5:54
Yorumlar (0)