我希望我的導(dǎo)航欄是粘性的，但它不起作用。我還使用一些基本的jQuery來(lái)切換類“dropmenu”的下拉。我還嘗試了& lta & gt元素，但它仍然不會(huì)工作。 這是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>

當(dāng)你放置一個(gè)position:sticky元素在另一個(gè)元素里面的時(shí)候，事情就變得棘手了。sticky元素將只移動(dòng)父元素的高度，所以您需要在父元素中有空間讓sticky元素移動(dòng)，因?yàn)閜osition: sticky的作用域是父元素而不是頁(yè)面。parents overflow和display屬性也會(huì)產(chǎn)生影響。您可以嘗試將父元素的display屬性設(shè)置為display:intial。

嘗試添加以下內(nèi)容:

.center, header{
  display:initial;
}

根據(jù)您的需要，您也可以將其設(shè)置為內(nèi)聯(lián)或內(nèi)聯(lián)塊。

以下是您的代碼片段，其中添加了一些其他內(nèi)容，只是為了便于展示:

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>

通常，這是因?yàn)橐恍└改傅? quot溢出"財(cái)產(chǎn)。

如果sticky元素的任何父/祖先設(shè)置了以下任何溢出屬性，則position: sticky將不起作用:

溢出:隱藏 溢出:滾動(dòng) 溢出:自動(dòng) 以下是對(duì)我有幫助的。只需將以下代碼片段復(fù)制/粘貼到您的瀏覽器控制臺(tái)中。這將幫助您識(shí)別溢出屬性設(shè)置為visible以外的值的所有父元素:

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

那么主要是為正確的元素設(shè)置正確的溢出屬性的問(wèn)題。

這不是這個(gè)具體問(wèn)題的解決方案，但如果它能幫助某人。

在重構(gòu)代碼時(shí)，我不小心刪除了頂部CSS規(guī)則，重新添加它對(duì)我來(lái)說(shuō)很有用:

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

對(duì)我來(lái)說(shuō)，我發(fā)現(xiàn)溢出:隱藏；在一個(gè)母容器上是什么打破了子容器的位置:粘性；。如果父對(duì)象上的溢出可見(jiàn)，粘性開(kāi)始工作。

我沒(méi)有溢出的父元素，所以我的解決方案是這樣的:

html, body {
  height: 100%;
  overflow: auto;
}