Question

我希望我的导航栏很粘，但它不起作用。我还使用一些基本的jQuery来为课程切换滑动＆＃34; dropmenu＆＃34;。我也试过<a>元素的位置粘贴，但它仍然不起作用。这是HTML和CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

那会是什么问题？

Answer 1

当你将position:sticky元素放在另一个元素中时，事情会变得棘手，你可能需要将父元素的display属性设置为除block之外的东西。

尝试添加以下内容：

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

Answer 2

对我来说，我发现父容器上的overflow: hidden;破坏了孩子的position: sticky;。如果可见父项溢出，则粘性开始工作。

Answer 3

通常是由于某些父级“溢出”属性。

如果sticky元素的任何父级/祖先设置了以下任何溢出属性，则位置：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;
    }

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

Answer 4

这不是解决这个问题的解决方案，但万一可以帮助别人。

重构代码时，我不小心删除了top CSS规则，将其重新添加对我来说是成功的秘诀：

.my-elem {
  position: sticky;
  top: 0;
}

Answer 5

在div.sticky类position:sticky中无效。试试“position:fixed”

为什么我的立场：粘不起作用？

5 个答案: