如何在 vue 组件中获取窗口滚动时固定元素的滚动高度？

【问题标题】：How can you get the scrollheight of an fixed element on window scroll within a vue component?如何在 vue 组件中获取窗口滚动时固定元素的滚动高度？
【发布时间】：2020-04-28 08:58:08
【问题描述】：

我正在尝试实现具有初始样式但在特定容器末尾的导航栏，我想更新导航栏的样式。

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

但是 scrollHeight 总是一样的。如何确定位置：固定元素在窗口滚动时的位置？

【问题讨论】：

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

【解决方案1】：

试试这个：

<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>

【讨论】：