I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Galaxy S8 phone.
It's interesting to see how the appearance of the component changes depending on whether you are scrolling up or down. Here is the relevant code snippet:
//template
<Stepper :class="{ fixed: hasScrolled }" />
//script
methods: {
methods: {
scroll() {
window.onscroll = () => {
if (window.pageYOffset > 25) {
this.$store.dispatch("updateHasScrolled", true);
}
if (window.pageYOffset < 25) {
this.$store.dispatch("updateHasScrolled", false);
}
};
}
},
computed: {
hasScrolled() {
return this.$store.getters.getHasScrolled;
}
}
//style
@media (max-width: 600px) {
.fixed {
position: sticky;
position: -webkit-sticky;
z-index: 10;
width: 100%;
top: 0;
left: 0;
}
}
You can find the repository here.