Vue.js скрывать navbar по скроллу

133
04 августа 2019, 23:20

Есть следующий компонент:

<template> 
  <div class="header"> 
    Header content 
  </div> 
</template> 
<script> 
  export default { 
 
  } 
</script> 
<style> 
  .header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100px; 
    width: 100%; 
  } 
</style>

Вопрос: каким образом добавить класс header-hidden к div.header, если высота скролла > 200px? Где во vue лучше вешать обработчики window.on? И нужно ли их уничтожать при уничтожении элемента?

Answer 1

Для корректной работы обработчик лучше всего разместить в блоке mounted или created. В блоке destroyed его следует удалить.

<template>
  <div ref="header" class="header">
    Header content
  </div>
</template>

<script>
  mounted(){
    window.addEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll() {
      if (window.pageYOffset > 200) {
        this.$refs.header.classList.add('header-hidden');
      }
    },
  },
  destroyed() {
    window.removeEventListener('scroll', this.onScroll);
  }
</script>
READ ALSO
Возможно ли прописать свое value в input type file?
javascript

Возможно ли прописать свое value в input type file?

Возможно ли добавить свои файлы в input type=file? Имеется ввиду, что записывается в value, когда файлы были добавлены? Тк

 106
Реализация не повторяющегося рандома
javascript

Реализация не повторяющегося рандома

Есть определенный тест, который генерируют массивы с ответами, но рандом повторяет числа

 127
Не работает translateY() [дубликат]
javascript

Не работает translateY() [дубликат]

На данный вопрос уже ответили:

 101
Значение для динамического элемента
javascript

Значение для динамического элемента

Через URL ко мне приходят параметры со значениями, которые я записываю в массив paramsURL[]Тогда мне нужно установить пришедшие данные как value для...

 111