“Position:sticky;”不工作的CSS和HTML [英] "Position: sticky;" not Working CSS and HTML
问题描述
我想让导航栏坚持到顶部,一旦我滚动到它,但它不工作,我不知道为什么。如果您可以请求帮助,这里是我的HTML和CSS代码:
。 nav-selections {text-transform:大写; letter-spacing:5px; font:18pxlato,sans-serif;显示:inline-block;文字修饰:无;白颜色;填充:18px; float:right; margin-left:50px;过渡:1.5秒; } .nav-selections:hover {transition:1.5s;颜色:黑色; } ul {background-color:#B79b58;溢出:自动; } li {list-style-type:none; }
< nav style =position:sticky; position :-webkit-sticky;> < ul align =left> < li>< a href =#/ contactclass =nav-selectionsstyle =margin-right:35px;>联系人< / a>< / li> < li>< a href =#/ aboutclass =nav-selections>关于< / a>< / li> < li>< a href =#/ productsclass =nav-selections>产品< / a>< / li> < li>< a href =#class =nav-selections>主页< / a>< / li> < / UL> < / nav>
< blockquote>
粘滞定位是相对和固定定位的混合体。该元素被视为相对定位,直到它超过指定的阈值,此时它将被视为固定定位。
...
您必须指定一个阈值并至少包含一个顶部
,右边
,底部
或左键
,粘滞定位的行为与预期相同。否则,它将与相对定位无法区分。
[来源:MDN
因此,在您的示例中,您必须使用<$ c $来定义最终应该保留的位置c> top 属性。
< NAV> < ul align =left> < li>< a href =#/ contactclass =nav-selectionsstyle =margin-right:35px;>联系人< / a>< / li> < li>< a href =#/ aboutclass =nav-selections>关于< / a>< / li> < li>< a href =#/ productsclass =nav-selections>产品< / a>< / li> < li>< a href =#class =nav-selections>主页< / a>< / li> < / nav>
I want to make the Navigation Bar stick to the top once I scroll to it, but it's not working and I have no clue why. If you can please help, here is my HTML and CSS code:
.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>
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
...
You must specify a threshold with at least one oftop
,right
,bottom
, orleft
for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning. [source: MDN]
So in your example, you have to define the position where it should stick in the end by using the top
property.
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>
这篇关于“Position:sticky;”不工作的CSS和HTML的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!