位置：粘滯失敗頁面

-1

希望有人可以幫助。有一個設置爲position:sticky的菜單欄。它從頁面加載的頂部起50px處開始。當文檔滾動時，菜單欄會像預期的那樣粘在頁面的頂部，直到它「向下」頁面的另一個元素「點擊」，此時它會在視口頂部上方滾動，以及其他所有內容。位置：粘滯失敗頁面

最初，我以爲它是「運行」到彈性項目或其他有position:relative的東西。事實並非如此。

有沒有人遇到過這個？我會提供一個代碼示例，但我不完全確定是什麼導致了這個問題。

來源

2017-09-28 Kevin Glick

哪裏是你的HTML和CSS，使我們可以看看嗎？ – Sameer

MDN：Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.

注意，粘，通過規範，不會裏面有溢出的單元工作：隱藏或自動

使用此鏈接：https://developer.mozilla.org/en-US/docs/Web/CSS/position

例子：

粘性按鈕始終移動，直到它的父div的邊緣。

section { 
 
    height: 200vh; 
 
    display: flex; 
 
} 
 
section nav { 
 
    background: wheat; 
 
    width: 30vw; 
 
    display: flex; 
 
} 
 
section nav button.btn { 
 
    background: #9b59b6; 
 
    border: 0px; 
 
    color: white; 
 
    flex: 1; 
 
    max-height: 50px; 
 
    padding: 1rem; 
 
    position: sticky; 
 
    top: 0px; 
 
} 
 
section div { 
 
    width: 100%; 
 
    background: pink; 
 
} 
 

 
header, footer { 
 
    text-align:center; 
 
    background: #2c3e50; 
 
    color:white; 
 
} 
 

 
header{ 
 
    padding:1rem; 
 
} 
 
footer{ 
 
    height:100vh; 
 
}

<header>Scroll the page to see the sticky effect.</header> 
 
<section> 
 
    <nav> 
 
    <button class="btn">Sticky Button</button> 
 
    </nav> 
 
    <div> 
 
    <article>Hello!</article> 
 
    </div> 
 
</section> 
 
<footer>Footer</footer>

來源

2017-09-28 02:52:23 nabanita

位置：粘滯失敗頁面

回答

相關問題