时间戳

首页 > 解决方案 > 如何在 vue 组件中获取窗口滚动时固定元素的滚动高度？

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

问题描述

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

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

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

标签： javascriptcssvue.jsvue-componentcss-position

解决方案

试试这个 ：

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

推荐阅读