我的頁面頂部有一個帶有徽標的粘性導航欄。
當頁面滾動時，徽標會變小一點。這會導致頁面 Y 滾動位置發生變化。當它到達滾動閾值所在的某個點時，它會卡在兩個位置之間，因為檔案的高度發生變化，迫使兩個斷點被連續觸發。（徽標在兩種尺寸之間閃爍）
例如，您滾動到位置 100，然后導航欄大小因滾動而更改為 59，然后回傳到 100 并重復。
CSS 類順風順水。
執行操作的 JavaScript 如下，非常簡單。
解決這個問題有哪些選擇？
window.addEventListener('scroll', () => scrollFunction());
const navLogo = document.querySelector('.navlogo');
function scrollFunction() {
if ($(window).scrollTop() > 80) {
navLogo.classList.remove('w-56');
navLogo.classList.add('w-36');
} else {
navLogo.classList.add('w-56');
navLogo.classList.remove('w-36');
}
}
任何幫助將大大appriciated。
uj5u.com熱心網友回復：
當你說你的導航欄“粘性”時，你的意思是position: sticky;？
用另一個具有固定高度的元素（由大徽標引起的最大尺寸）包裹您的導航欄，并使其成為您的粘性元素，也應該做同樣的事情。現在您的實際導航欄將能夠調整大小，而不會改變檔案的高度。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386899.html
標籤：javascript html css 顺风-css