CSS 位置：sticky 在向上滚动和向下滚动时表现不同答案

【问题标题】：CSS position: sticky behaves differently on scroll up and scroll downCSS 位置：sticky 在向上滚动和向下滚动时表现不同
【发布时间】：2020-08-12 18:32:51
【问题描述】：

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

请注意组件在向上滚动和向下滚动时的不同显示方式。它也发生在我的手机 (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。

【问题讨论】：

当我在 iOS 模拟器和 Chrome 中以响应模式访问您的 Heroku 网站并尝试上下滚动时，我没有看到任何看起来隐藏在浏览器顶部的东西。
我上传了一个屏幕录像，演示了正在发生的事情：storage.googleapis.com/plant-me/… 请注意组件在向上滚动和向下滚动时的显示方式不同。它也发生在我的手机（Galaxy S8）上。

标签： javascript css vue.js css-position vuex

【解决方案1】：

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

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

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

【讨论】：