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>
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.
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
veyasol
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;
}
<nav>
<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>
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;
}
<nav>
<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>
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