CODEWITHSUNDEEP
javascriptcssvue.jsvue-componentcss-position
Mike Shiv
Mike Shiv

Reputation: 223

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

I'm trying to achieve a navigation bar that has initial styling but at the end of a specific container, I'm wanting to update the styling of the navigation bar.

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

but the scrollHeight is always the same. How can I figure out where the position:fixed element is located at on window scroll?

Upvotes: 1

Views: 1967

Answers (1)

Mostafa Ahmed
Mostafa Ahmed

Reputation: 474

try this : 

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

Upvotes: 3

Related Questions