Как вы можете получить высоту прокрутки фиксированного элемента при прокрутке окна внутри компонента vue? - PullRequest
0 голосов
/ 10 января 2020

Я пытаюсь получить панель навигации, которая имеет начальный стиль, но в конце указанного c контейнера, я хочу обновить стиль панели навигации.

<template>
<div style="position:fixed" class="mynav" ref="desktop">
  content..
</div>
</template>
mounted () {
   window.document.body.onscroll = () => {
     console.log(this.$refs.desktop.scrollHeight)
  }
}

но высота свитка всегда одинакова. Как я могу узнать, где находится позиция: фиксированный элемент на прокрутке окна?

1 Ответ

4 голосов
/ 25 января 2020

попробуйте это:

<template>
  <div class="container-body" @mousewheel="handelScroll">
    <div style="position:fixed" class="mynav" ref="desktop">
      content..
    </div>
  </div>
</template>

<script>

 handelScroll(){
        let scrollDiv = document.getElementsByClassName('mynav')
        console.log(scrollDiv)
        if(window.scrollY < 100){
            console.log(window.scrollY ,  scrollDiv)
            scrollDiv[0].classList.add('updateClass')
        }
        else{
            scrollDiv[0].classList.remove('updateClass')
        }
    }

</script>

<style>
  .updateClass{
     display:none;
  }
</style>
...