为什么我的职位:粘性不起作用? [英] Why is my position:sticky not working?

问题描述

我希望导航栏保持粘性，但无法正常工作.我还使用一些基本的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属性设置为块之外的其他内容. /p>

尝试添加以下内容:

.center, header{
  display:initial;
}

您也可以根据需要将其设置为内联或内联阻止.

以下是您的摘录，其中还添加了一些其他内容，仅用于显示目的:

 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> 

I want my navigation bar to be sticky, but it's not working. I'm also using some basic jQuery to toggle slidedown for class "dropmenu". I also tried position sticky for <a> element and still it wouldn't work. This is HTML and 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>

So what would be the problem?

解决方案

When you place a position:sticky element inside another element things can get tricky you may need to set the display property of your parent elements to something besides block.

try adding the following:

.center, header{
  display:initial;
}

You can probably set it to inline or inline-block as well depending on your needs.

Here is your snippet with that added along with a couple of other things just for display purposes:

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>

这篇关于为什么我的职位:粘性不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！