希望有人可以幫助。有一個設置爲position:sticky
的菜單欄。它從頁面加載的頂部起50px處開始。當文檔滾動時,菜單欄會像預期的那樣粘在頁面的頂部,直到它「向下」頁面的另一個元素「點擊」,此時它會在視口頂部上方滾動,以及其他所有內容。位置:粘滯失敗頁面
最初,我以爲它是「運行」到彈性項目或其他有position:relative
的東西。事實並非如此。
有沒有人遇到過這個?我會提供一個代碼示例,但我不完全確定是什麼導致了這個問題。
希望有人可以幫助。有一個設置爲position:sticky
的菜單欄。它從頁面加載的頂部起50px處開始。當文檔滾動時,菜單欄會像預期的那樣粘在頁面的頂部,直到它「向下」頁面的另一個元素「點擊」,此時它會在視口頂部上方滾動,以及其他所有內容。位置:粘滯失敗頁面
最初,我以爲它是「運行」到彈性項目或其他有position:relative
的東西。事實並非如此。
有沒有人遇到過這個?我會提供一個代碼示例,但我不完全確定是什麼導致了這個問題。
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>
哪裏是你的HTML和CSS,使我們可以看看嗎? – Sameer