如何在 vue 组件内滚动 window 上的固定元素的滚动高度？

Question

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

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

但 scrollHeight 始终相同。我如何找出 position:fixed 元素在 window 滚动条上的位置？

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

如何在 vue 组件内滚动 window 上的固定元素的滚动高度？

How can you get the scrollheight of an fixed element on window scroll within a vue component?

javascript

css

css-position

vue.js

vue-component