我是學生，我使用 Script Setup 語法來處理 VueJs。
我試圖在向下滾動時隱藏導航欄，并在向上滾動時顯示它。問題似乎來自 previousScrollTop。當我使用 console.log(previousScrollTop) 時，它的值與 ScrollTop 完全相同。
為了讓它作業，我需要低于 ScrollTop 值的 previousScrollTop 值。我嘗試了很多方法但沒有用。你能幫我么？如果您有任何改進我的代碼的建議，請不要猶豫 =)
這是我的代碼：
const manageNavBarAnimations = () => {
const header = document.querySelector("header");
const scrollTop = document.documentElement.scrollTop;
const previousScrollTop = scrollTop;
console.warn(previousScrollTop);
console.log(scrollTop);
if (scrollTop > previousScrollTop) {
header.style.top = "-80px";
} else {
header.style.top = "0";
}
};header {
@apply fixed right-0 left-0 z-50 bg-slate-900;
}<template>
<header @scroll="manageNavBarAnimations">
<main-nav-organism></main-nav-organism>
</header>
</template>uj5u.com熱心網友回復：
你在賦值previousScrollTop后直接賦值scrollTop，所以顯然這兩個值總是相同的。在對第一遍的錯誤情況進行一些檢查和處理之后，您必須將您的scrollTop值分配給您的變數（檢查該值是否不存在，或者在開始時為其分配默認值）previousScrollToppreviousScrollTop
previousScrollTop此外，如果您希望它的值在呼叫之間保持不變，則必須在函式外部創建變數。我邀請您閱讀有關變數的不同范圍和范圍的資訊
let previousScrollTop;
const manageNavBarAnimations = () => {
const header = document.querySelector("header");
const scrollTop = document.documentElement.scrollTop;
if (scrollTop > previousScrollTop || !previousScrollTop) {
header.style.top = "-80px";
} else {
header.style.top = "0";
}
previousScrollTop = scrollTop
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/535711.html
上一篇：如何根據日期計算天數