CSS 位置：粘性在向上滚动和向下滚动时表现不同

Question

在我的 Vue CLI 应用程序中，我在组件上应用 position: sticky。向下滚动时，一半的组件错误地隐藏在浏览器顶部下方，但是向上滚动时，它会按预期工作。

请注意组件在向上滚动和向下滚动时的显示方式有何不同。它也发生在我的 phone (Galaxy S8) 上。

相关代码如下：

//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;
  }
}

回购是 hosted here。

Answer 1

我通过向控制台记录 window.pageYOffset 注意到，它在页面顶部的值不是 0，而是在向下滚动页面后接收到值 0。这几乎就像是将 window 的顶部视为更下方的任意数量的像素。

我仍然不知道它为什么这样做，但我通过修复另一个错误设法无意中解决了这个问题。

我有一个按钮，其边距将其推出容器，导致溢出。我删除了页边距，不知何故 window.pageYOffset 开始按预期运行，值 0 位于页面顶部。一个奇怪的问题，但很高兴它得到了解决。

CSS 位置：粘性在向上滚动和向下滚动时表现不同

CSS position: sticky behaves differently on scroll up and scroll down

javascript

css

css-position

vue.js

vuex