我希望我的导航栏是粘滞的,但它不工作。我还使用一些基本的jQuery来切换类“dropmenu”的slidedown。我还尝试了<a>
元素的位置粘性,但仍然不起作用。这是HTML和CSS:
.dropmenu {
display: block;
height: 65px;
width: 100%;
background: url("images/menuicon.png") no-repeat 98% center;
background-color: #404040;
cursor: pointer;
}
nav ul {
padding: 0;
overflow: hidden;
background: #505050;
display: none;
}
nav ul li {
display: block;
float: none;
text-align: left;
width: 100%;
margin: 0;
}
nav ul li a {
color: white;
padding: 10px;
border-bottom: 1px solid #404040;
display: block;
margin: 0;
}
div.sticky {
position: sticky;
top: 0;
}
<div class="center">
<header>
<img class="headerImage" src="images/header.png"/>
<hr class="menu">
<div class="sticky">
<a class="dropmenu"></a>
<nav class="desktop">
<ul>
<li><a href="index.php">Sertet</a></li>
<li><a href="index.php">Rtretrti</a></li>
<li><a href="photos.php">ertettterli</a></li>
<li><a href="index.php">retemi</a></li>
<li><a href="index.php">Kerterti</a></li>
</ul>
</nav>
</div>
</header>
<hr class="menu">
<p>content goes here</p>
</div>
那会有什么问题呢
5条答案
按热度按时间dojqjjoe1#
当你把一个
position:sticky
元素放在另一个元素中时,事情可能会变得棘手。sticky元素只会移动父元素的高度,因此您需要在父元素中留出空间,以便sticky元素移动,因为position: sticky
的作用域是父元素而不是页面。父级溢出和显示属性也会产生影响。您可以尝试将父元素的display属性设置为display: intital
。尝试添加以下内容:
你也可以根据自己的需要将其设置为inline或inline-block。
下面是您的代码片段,其中添加了一些其他内容,仅用于显示目的:
vfhzx4xs2#
通常,这是因为某些父节点的“溢出”属性。
如果sticky元素的任何父/祖先设置了以下任何溢出属性,position:sticky不起作用:
这是帮助我的东西。只需将以下代码片段复制/粘贴到浏览器的控制台。这将帮助您识别溢出属性设置为非可见的所有父元素:
然后主要是将正确的溢出属性设置为正确的元素的问题。
3qpi33ja3#
这不是解决这个具体问题的办法,但万一它能帮助到别人。
在重构代码时,我不小心删除了
top
CSS规则,将其添加回来对我来说是一个诀窍:dwthyt8l4#
对我来说,我发现父容器上的
overflow: hidden;
破坏了子容器的position: sticky;
。如果父节点上的溢出可见,则粘性开始工作。ttvkxqim5#
我没有溢出的父元素,所以我的解决方案是这样的: