gpt4 book ai didi

html - 为什么我的职位是:sticky not working?

转载 作者:行者123 更新时间:2023-12-03 17:42:05 26 4
gpt4 key购买 nike

我希望导航栏保持粘性,但无法正常工作。我还使用一些基本的jQuery来切换“dropmenu”类的向下滑动。我也尝试对<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>


那会是什么问题呢?

最佳答案

当您将position:sticky元素放置在另一个元素中时,事情可能会变得棘手,您可能需要将父元素的display属性设置为block之外的其他值。

尝试添加以下内容:

.center, header{
display:initial;
}

您也可以根据需要将其设置为inline或inline-block。

这是您的摘录,其中添加了摘录以及一些其他内容,仅用于显示目的:

body{
height:200vh;
}

.center, header{
display:initial;
}

.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 style="height:100px; background:green;"></div>

<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>

关于html - 为什么我的职位是:sticky not working?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47723554/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com