为什么我的 position:sticky 不起作用？

Question

我希望我的导航栏是粘性的，但它不起作用。我还使用一些基本的 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>

那会是什么问题呢？

原文由 Toms Eglite 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当您将 position:sticky 元素放置在另一个元素中时，事情会变得棘手。粘性元素只会移动父元素的高度，因此您需要在父元素中留出空间以便粘性元素移动，因为 position: sticky 的范围仅限于父元素而不是页面。 parents overflow 和 display 属性也有影响。您可以尝试将父元素的显示属性设置为 display: intital 。

尝试添加以下内容：

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

原文由 Steve K 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

通常，这是因为某些父母的“溢出”财产。

如果粘性元素的任何父/祖先设置了以下任何溢出属性，则 position: sticky 将不起作用：

• 溢出：隐藏
• 溢出：滚动
• 溢出：自动

这就是对我有帮助的。只需将以下代码片段复制/粘贴到浏览器的控制台中。这将帮助您识别所有溢出属性设置为非可见属性的父元素：

     // Change to your STICKY element
    let parent = document.querySelector('.sticky').parentElement;

    while (parent) {
        const hasOverflow = getComputedStyle(parent).overflow;
        if(hasOverflow !== 'visible') {
            console.log(hasOverflow, parent);
        }
        parent = parent.parentElement;
    }

然后主要是将正确的溢出属性设置为正确的元素的问题。

原文由 Maria Ramono 发布，翻译遵循 CC BY-SA 4.0 许可协议