fixed header on scroll vuejs

1. Import the necessary Vue.js components and styles.

<template>
  <div>
    <header class="fixed-header">
      <!-- Your header content goes here -->
    </header>
    <!-- Rest of your page content goes here -->
  </div>
</template>

<script>
export default {
  // Your component logic goes here
}
</script>

<style scoped>
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  / Add other styling as needed /
}
</style>

1. Add a data property to track the scroll position.

<script>
export default {
  data() {
    return {
      isScrolled: false
    };
  },
  // Your component logic goes here
}
</script>

1. Use the window scroll event to update the isScrolled property based on the scroll position.

<script>
export default {
  data() {
    return {
      isScrolled: false
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.isScrolled = window.scrollY > 0;
    }
  }
}
</script>

1. Apply a dynamic class to the header based on the isScrolled property.

<template>
  <div>
    <header :class="{ 'fixed-header': isScrolled }">
      <!-- Your header content goes here -->
    </header>
    <!-- Rest of your page content goes here -->
  </div>
</template>

1. Customize the styling of the fixed header using the scoped style.

<style scoped>
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  / Add other styling as needed for the fixed header /
}
</style>