I am a student working with VueJs using the Script Setup syntax.
My goal is to hide the navbar when scrolling down and make it appear when scrolling to the top. The issue seems to be related to the previousScrollTop variable. When I console.log(previousScrollTop), its value is always the same as ScrollTop.
To achieve the desired functionality, I need the previousScrollTop value to be lower than the ScrollTop value. I have tried various approaches but none have worked. Can you please assist me? Any suggestions to improve my code would be greatly appreciated =)
Below is the code snippet:
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>