為什么我的博客文章頁面上的位置粘性不起作用？

Question

我已將父元素設置為“溢出：繼承”，並確保所有父元素上的位置正確。 但是，我似乎無法讓我的自定義菜單“ .leftsidebar”停留在某個滾動點上。

• 確保父元素溢出和定位不會引起問題

• 嘗試了其他幾種SO討論均無濟於事。

   <nav class="leftsidebar"> <ul id="stick-menu" class="nav nav-tabs"> <li class=""> <a href="#choose-website-platform">Step #1: Choose the Right Platform For Your Website</a> </li> <li class=""> <a href="#secure-domain-hosting">Step #2: Secure A Domain Name &amp; Fast Web Hosting</a> </li> <li> <a href="#setup-install-wordpress">Step #4: Setup &amp; Install WordPress</a> </li> <li> <a href="#customize-your-website">Step #4: Customize Your Website</a> </li> </ul> </nav> .leftsidebar { position: -webkit-sticky !important; position: sticky; max-width: 30%; float: left; margin-left: -39.5%; top: 100px; z-index: 10; background-color: transparent; } #stick-menu { z-index: 1; width: 100%; padding: 5px 0 !important; } 

預期結果：粘性菜單應停留到長篇文章的末尾……這很長。

實際結果：粘性菜單停留了一秒鍾，但隨后停止工作。

Answer 1

Okey，我找到了。 在某些路徑中，您的菜單位於.entry-content但主頁面中，您具有另一個div，它在索引的某些部分之后阻止了粘滯。 嘗試將粘性菜單顯示在此處，如圖所示。

Answer 2

max-width是原因

.leftsidebar {
    position: -webkit-sticky !important;
    position: sticky;
    max-width: 100%;
    float: left;
    margin-left: -39.5%;
    top: 100px;
    z-index: 10;
    background-color: transparent;
}
#stick-menu {
    z-index: 1;
    width: 100%;
    padding: 5px 0 !important;
}