web-dev-qa-db-ja.com

位置を決める：スティッキーのような動作を修正（Vue2の場合）

Position: stickyほとんどのモバイルブラウザではサポートされていません。だが position: fixedは私が必要とするものではありません（固定ブロックがドキュメントの下部のコンテンツと重複しているため）。

Jqueryの場合、ドキュメントの下部をスクロールすると、固定ブロックの静的位置を簡単に設定できると思います。

しかし、Vue2の場合、同じことを行う方法がわかりません。アドバイスをお願いします。または、より良い解決策が存在する可能性があります。

cssvue.jsvuejs2css-positionsticky
3
Maria

コメントで述べたように、可能であればポリフィルを使用することをお勧めします。彼らはそれを正しくするために多くの努力を払うでしょう。ただし、Vueでそれを行う方法について簡単に説明します。

ScrollY値をデータ項目に入れることで、アプリケーションにスクロールイベントを処理させます。ぼくの sticky-topコンポーネントは、固定された上部の位置を計算し、それが0より大きい場合は、それを使用します。ウィジェットはposition: relative。

new Vue({
  el: '#app',
  data: {
    scrollY: null
  },
  mounted() {
    window.addEventListener('scroll', (event) => {
      this.scrollY = Math.round(window.scrollY);
    });
  },
  components: {
    stickyTop: {
      template: '<div class="a-box" :style="myStyle"></div>',
      props: ['top', 'scrollY'],
      data() {
        return {
          myStyle: {},
          originalTop: 0
        }
      },
      mounted() {
        this.originalTop = this.$el.getBoundingClientRect().top;
      },
      watch: {
        scrollY(newValue) {
          const rect = this.$el.getBoundingClientRect();
          const newTop = this.scrollY + +this.top - this.originalTop;

          if (newTop > 0) {
            this.$set(this.myStyle, 'top', `${newTop}px`);
          } else {
            this.$delete(this.myStyle, 'top');
          }
        }
      }
    }
  }
});
#app {
  height: 1200px;
}

.spacer {
  height: 80px;
}

.a-box {
  display: inline-block;
  height: 5rem;
  width: 5rem;
  border: 2px solid blue;
  position: relative;
}
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div class="spacer"></div>
  <div class="a-box"></div>
  <sticky-top top="20" :scroll-y="scrollY"></sticky-top>
  <div class="a-box"></div>
</div>
2
Roy J