2017-09-28 77 views
-1

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

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

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

+0

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

回答

1

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>