When the page is reloaded, the computed property for window.scrollY will always be 0, but it functions properly with

Question

When the page is reloaded, the computed property for window.scrollY will always be 0, but it functions properly with

<div id="component-navbar" :class="hasBackground">

computed: {
  hasBackground() {
    if (window.scrollY > 0) {
      return 'has-background'
    }
  }
}

I am facing an issue with my sticky nav bar where I want to apply a background when the page scroll is greater than 0. The challenge lies in the fact that hasBackground.

does not update as the user scrolls
shows window.scrollY as zero on page reload even after scrolling
only responds to changes when a file modification triggers hot reload.

How can I resolve this problem?

javascript vue.js

Answer 1

Answer №1

According to @obermillerk:

The window object does not work properly with Vue.js.

Here are two possible solutions:

Retrieve window.scrollY when your component is first initialized.

Add

window.addEventListener('scroll', ..., { passive: true })

.

Retrieve `window.scrollY` when your component is initialized

Vue.component('component-navbar', {
  computed: {
    hasBackground () {
      console.log('window.scrollY', window.scrollY)
      if (window.scrollY > 0) {
        return 'has-background'
      }
    }
  },
  template: '<nav :class="hasBackground"></nav>'
})

const app = new Vue({
  el: '#app'
})

#app {
  min-height: 110vh;
}
nav {
  min-height: 50vh;
}
nav.has-background {
  background: linear-gradient(red, orange);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<article id="app">
  <component-navbar></component-navbar>
</article>

Add

window.addEventListener('scroll', ..., { passive: true })

Vue.component('component-navbar', {
  data () {
    return {
      isScrolled: false
    }
  },

  computed: {
    hasBackground () {
      if (this.isScrolled) {
        return 'has-background'
      }
    }
  },

  template: '<nav :class="hasBackground"></nav>',

  mounted () {
    window.addEventListener('scroll', this.setIsScrolled, { passive: true })
    this.setIsScrolled()
  },

  destroyed () {
    window.removeEventListener('scroll', this.setIsScrolled, { passive: true })
  },

  methods: {
    setIsScrolled () {
      this.isScrolled = window.scrollY > 0
    }
  },
})

const app = new Vue({
  el: '#app'
})

#app {
  min-height: 110vh;
}
nav {
  min-height: 50vh;
}
nav.has-background {
  background-image: linear-gradient(red, orange);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<article id="app">
  <component-navbar></component-navbar>
</article>

Answer 2

According to @obermillerk:

The window object does not work properly with Vue.js.

Here are two possible solutions:

Retrieve window.scrollY when your component is first initialized.

Add

window.addEventListener('scroll', ..., { passive: true })

.

Retrieve `window.scrollY` when your component is initialized

Vue.component('component-navbar', {
  computed: {
    hasBackground () {
      console.log('window.scrollY', window.scrollY)
      if (window.scrollY > 0) {
        return 'has-background'
      }
    }
  },
  template: '<nav :class="hasBackground"></nav>'
})

const app = new Vue({
  el: '#app'
})

#app {
  min-height: 110vh;
}
nav {
  min-height: 50vh;
}
nav.has-background {
  background: linear-gradient(red, orange);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<article id="app">
  <component-navbar></component-navbar>
</article>

Add

window.addEventListener('scroll', ..., { passive: true })

Vue.component('component-navbar', {
  data () {
    return {
      isScrolled: false
    }
  },

  computed: {
    hasBackground () {
      if (this.isScrolled) {
        return 'has-background'
      }
    }
  },

  template: '<nav :class="hasBackground"></nav>',

  mounted () {
    window.addEventListener('scroll', this.setIsScrolled, { passive: true })
    this.setIsScrolled()
  },

  destroyed () {
    window.removeEventListener('scroll', this.setIsScrolled, { passive: true })
  },

  methods: {
    setIsScrolled () {
      this.isScrolled = window.scrollY > 0
    }
  },
})

const app = new Vue({
  el: '#app'
})

#app {
  min-height: 110vh;
}
nav {
  min-height: 50vh;
}
nav.has-background {
  background-image: linear-gradient(red, orange);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<article id="app">
  <component-navbar></component-navbar>
</article>

Answer 3

Answer №2

Observing the window object in Vue can be challenging. For more information on Vue's reactivity, check out this link: https://v2.vuejs.org/v2/guide/reactivity.html

I initially considered using a proxy for the window object within Vue data, but it seems that this approach creates a new object with getters and setters for existing properties. As a result, any new data created this way would not react to changes in the original window object. Unfortunately, the best option is to listen for events instead.

Answer 4

Observing the window object in Vue can be challenging. For more information on Vue's reactivity, check out this link: https://v2.vuejs.org/v2/guide/reactivity.html

I initially considered using a proxy for the window object within Vue data, but it seems that this approach creates a new object with getters and setters for existing properties. As a result, any new data created this way would not react to changes in the original window object. Unfortunately, the best option is to listen for events instead.

When the page is reloaded, the computed property for window.scrollY will always be 0, but it functions properly with

Answer №1

Retrieve `window.scrollY` when your component is initialized

Add
`window.addEventListener('scroll', ..., { passive: true })`

Answer №2

Similar questions

How can the Vue input tag element be properly populated with tags?

Child component in Angular fails to detect input changes

How can I use `app.js` in Zendesk to connect to an external API using the complete URL

Retrieve the image by its unique identifier while viewing a preview of the image before it is uploaded

Enhance the performance of page loading and implement a consistent spinner feature to ensure smooth transitions for users in Next.js version 13

When working with Vue JS, which is more performant and preferable to use: making direct changes to state in Pinia or using $patch()?

What about dynamically generating content with WebUserControl?

Tips for refreshing many dashboard elements with a single click using Vue.js

I'm experiencing a flickering issue with my carousel when it reaches over 10,000 pixels during animation. Could this be related to a jQuery problem

Exploring ways to pass props in functional components in React Native

Ways to resolve the issue of the experimental syntax 'jsx' not being enabled

What causes the strings in an array to be split into individual characters when using the jquery each() function?

Steps to retrieve the latest value of a specific cell within the Material UI Data Grid

Nested AJAX call yields undefined value

When the jQuery keyup event is triggered, the "function" will be incremented to 0

Can the lexical scope of a function in JS be maintained while overriding it?

How to update MongoDB documents with referenced objects using Mongoose?

Are there any specific events in PrimeNg's p-calendar that trigger when the time is changed?

What is the best way to link CSS files from libraries that are downloaded using npm?

Receiving unique socket IDs for two different socket.on events

When the page is reloaded, the computed property for window.scrollY will always be 0, but it functions properly with

Answer №1

Retrieve window.scrollY when your component is initialized

Add window.addEventListener('scroll', ..., { passive: true })

Answer №2

Similar questions

How can the Vue input tag element be properly populated with tags?

Child component in Angular fails to detect input changes

How can I use `app.js` in Zendesk to connect to an external API using the complete URL

Retrieve the image by its unique identifier while viewing a preview of the image before it is uploaded

Enhance the performance of page loading and implement a consistent spinner feature to ensure smooth transitions for users in Next.js version 13

When working with Vue JS, which is more performant and preferable to use: making direct changes to state in Pinia or using $patch()?

What about dynamically generating content with WebUserControl?

Tips for refreshing many dashboard elements with a single click using Vue.js

I'm experiencing a flickering issue with my carousel when it reaches over 10,000 pixels during animation. Could this be related to a jQuery problem

Exploring ways to pass props in functional components in React Native

Ways to resolve the issue of the experimental syntax 'jsx' not being enabled

What causes the strings in an array to be split into individual characters when using the jquery each() function?

Steps to retrieve the latest value of a specific cell within the Material UI Data Grid

Nested AJAX call yields undefined value

When the jQuery keyup event is triggered, the "function" will be incremented to 0

Can the lexical scope of a function in JS be maintained while overriding it?

How to update MongoDB documents with referenced objects using Mongoose?

Are there any specific events in PrimeNg's p-calendar that trigger when the time is changed?

What is the best way to link CSS files from libraries that are downloaded using npm?

Receiving unique socket IDs for two different socket.on events

Retrieve `window.scrollY` when your component is initialized

Add
`window.addEventListener('scroll', ..., { passive: true })`