「位置：粘稠;」不工作的CSS和HTML

我想讓導航欄堅持到頂部，一旦我滾動到它，但它不工作，我不知道爲什麼。如果你能請幫助，這是我的HTML和CSS代碼：「位置：粘稠;」不工作的CSS和HTML

.nav-selections { 
 
     text-transform: uppercase; 
 
     letter-spacing: 5px; 
 
     font: 18px "lato",sans-serif; 
 
     display: inline-block; 
 
     text-decoration: none; 
 
     color: white; 
 
     padding: 18px; 
 
     float: right; 
 
     margin-left: 50px; 
 
     transition: 1.5s; 
 
    } 
 

 
     .nav-selections:hover{ 
 
      transition: 1.5s; 
 
      color: black; 
 
     } 
 

 
    ul { 
 
     background-color: #B79b58; 
 
     overflow: auto; 
 
    } 
 

 
    li { 
 
     list-style-type: none; 
 
    }

<nav style="position: sticky; position: -webkit-sticky;"> 
 
     <ul align="left"> 
 
      <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> 
 
      <li><a href="#/about" class="nav-selections">About</a></li> 
 
      <li><a href="#/products" class="nav-selections">Products</a></li> 
 
      <li><a href="#" class="nav-selections">Home</a></li> 
 
     </ul> 
 
    </nav>

來源

2017-04-30 Harleyoc1

位置：粘貼需要一個座標到電話的位置 –

您還必須小心父元素。 ['位置：粘性'可以停止工作，如果它在柔性盒內部，除非你小心]（https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox ），並且如果在它和它內部滾動的內容之間有一個「overflow：hidden」或「overflow：auto」，它也會失敗（體內根或最近的祖先有overflow：scroll） – user568458

置頂定位是相對固定定位的混合體。該元素被視爲相對定位，直到它超過指定的閾值，此時它被視爲固定位置。
...
必須與top至少一個，right，bottom，或者left指定一個閾值粘性定位像預期的那樣。否則，它將與相對定位無法區分。 [source: MDN]

因此，在你的榜樣，你必須定義它到底應該使用top財產堅持的立場。

html, body { 
 
    height: 200%; 
 
} 
 

 
nav { 
 
    position: sticky; 
 
    position: -webkit-sticky; 
 
    top: 0; /* required */ 
 
} 
 

 
.nav-selections { 
 
    text-transform: uppercase; 
 
    letter-spacing: 5px; 
 
    font: 18px "lato", sans-serif; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: 18px; 
 
    float: right; 
 
    margin-left: 50px; 
 
    transition: 1.5s; 
 
} 
 

 
.nav-selections:hover { 
 
    transition: 1.5s; 
 
    color: black; 
 
} 
 

 
ul { 
 
    background-color: #B79b58; 
 
    overflow: auto; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
}

<nav> 
 
    <ul align="left"> 
 
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> 
 
    <li><a href="#/about" class="nav-selections">About</a></li> 
 
    <li><a href="#/products" class="nav-selections">Products</a></li> 
 
    <li><a href="#" class="nav-selections">Home</a></li> 
 
    </ul> 
 
</nav>

來源

2017-04-30 13:57:35 Marvin

謝謝你的工作 – Harleyoc1

從我的評論：

nav { 
 
    position: sticky; 
 
    top: 0; 
 
} 
 

 
.nav-selections { 
 
    text-transform: uppercase; 
 
    letter-spacing: 5px; 
 
    font: 18px "lato", sans-serif; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: 18px; 
 
    float: right; 
 
    margin-left: 50px; 
 
    transition: 1.5s; 
 
} 
 

 
.nav-selections:hover { 
 
    transition: 1.5s; 
 
    color: black; 
 
} 
 

 
ul { 
 
    background-color: #B79b58; 
 
    overflow: auto; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
} 
 

 
body { 
 
    height: 200vh; 
 
}

<nav> 
 
    <ul align="left"> 
 
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> 
 
    <li><a href="#/about" class="nav-selections">About</a></li> 
 
    <li><a href="#/products" class="nav-selections">Products</a></li> 
 
    <li><a href="#" class="nav-selections">Home</a></li> 
 
    </ul> 
 
</nav>

有填充工具使用其他瀏覽器比FF和Chrome。這是一個可以在任何時候通過瀏覽器實現的實驗規則。 Chrome幾年前添加它，然後放棄它，它似乎回來了...但是多久？

最接近的將是位置：更新滾動時一度達到粘點，如果你想要把它變成一個javascript腳本

來源

2017-04-30 13:59:50

非常感謝你的工作！ – Harleyoc1

檢查父元素具有溢出相對+ coordonates：隱藏;嘗試切換它。

這可能會影響您的位置：粘在子元素上。

來源

2017-12-19 00:36:39 MarsAndBack

希望我可以多次讚揚你！這比我想要承認的更頻繁地咬傷我。 –

我有同樣的問題，我找到了答案here。

如果您的元素沒有像預期的那樣粘滯，首先要檢查的是應用於容器的規則。

具體而言，請查找父級上設置的任何溢出屬性。 您不能在position: sticky元素的父級上使用：overflow: hidden，overflow: scroll或overflow: auto。

來源

2018-03-03 04:58:02

「位置：粘稠;」不工作的CSS和HTML

回答

相關問題