위치 설정: 고정 동작과 같은 고정 동작(Vue2의 경우)

위치 설정: 고정 동작과 같은 고정 동작(Vue2의 경우)

Position: sticky는 대부분의 모바일브라우저에서 지원되지 않습니다.그렇지만position: fixed(고정 블록이 문서 하단에 있는 내용과 겹치기 때문에) 필요한 것은 아닙니다.

jquery의 경우 문서 하단을 스크롤하면 고정 블록의 정적 위치를 쉽게 설정할 수 있을 것 같습니다.

하지만 Vue2의 경우 동일한 방법을 전혀 알지 못합니다.조언 좀 해주세요.또는 더 나은 솔루션이 존재할 수도 있습니다.

댓글에서도 언급했듯이 가능하면 폴리필을 사용하는 것을 추천합니다.그들은 그것을 바로잡기 위해 많은 노력을 기울였을 것이다.그러나 Vue에서 이를 수행하는 방법에 대한 간단한 견해가 있습니다.

스크롤 Y 값을 데이터 항목에 넣어 스크롤 이벤트를 응용 프로그램에서 처리하도록 합니다.나의sticky-topcomponent는 고정된 상단 위치가 무엇인지 계산하고 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>

이건 나한테 효과가 있는 것 같아

...

  <header
    ref="header"
    class="header-container"
    :class="{ 'header-container--sticky': isHeaderSticky }"
  >

...

...

data() {
    return{
      scrollY: null,
      headerTop: 0,
      isHeaderSticky: false,
    }
  },
  mounted() {
    window.addEventListener('load', () => {
      window.addEventListener('scroll', () => {
        this.scrollY = Math.round(window.scrollY);
      });
      this.headerTop = this.$refs.header.getBoundingClientRect().top;
    });
  },
  watch: {
    scrollY(newValue) {
      if (newValue > this.headerTop) {
        this.isHeaderSticky = true;
      } else {
        this.isHeaderSticky = false;
      }
    }
  }

...

...

.header-container {
      &--sticky {
        position: sticky;
        top: 0;
        z-index: 9999;
      }
    }

...

언급URL : https://stackoverflow.com/questions/48884257/make-position-fixed-behavior-like-sticky-for-vue2