我正在试验粘性导航,我遇到了问题。问题是,当我将导航器放在其他元素中时,它不再是粘性的。
.nav-wrapper{
position: absolute;
bottom: 0;
}
.nav-wrapper nav{
position: sticky;
top: 0;
}
<div class="nav-wrapper">
<nav>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
</nav>
</div>
位置粘滞,认为父元素应该按原样运行。在您的情况下,父元素的高度由sticky元素定义,因此元素没有空间可以粘贴。
添加边框以更好地查看问题:
.nav-wrapper {
position: absolute;
bottom: 0;
border: 2px solid;
}
.nav-wrapper nav {
position: sticky;
top: 0;
}
body {
min-height:200vh;
}
<div class="nav-wrapper">
<nav>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
</nav>
</div>
现在为父元素添加高度,看看发生了什么:
.nav-wrapper {
position: absolute;
bottom: 0;
border: 2px solid;
height:80vh;
}
.nav-wrapper nav {
position: sticky;
top: 0;
}
body {
min-height:200vh;
}
<div class="nav-wrapper">
<nav>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
</nav>
</div>
粘性行为正常工作,因为父元素上有足够的高度,可以在特定阈值之后修复元素。
粘性定位元素是其计算的位置值是粘性的元素。它被视为相对定位,直到其包含块在其流根(或其内滚动的容器)内超过指定的阈值(例如将顶部设置为除auto之外的值),此时它被视为“卡住”直到满足包含block.ref的相对边缘