Comment faire de la barre de navigation fixe avec vue js?

Question

entrez la description de l'image ici

J'essaie de créer une page de destination en utilisant vue.js, avec un design d'en-tête comme sur l'image ci-dessus.

Donc, je crée un composant appelé "en-tête", avec un contenu contenu selon la conception.

Comment créer une barre de navigation fixe, lorsque la page défile, la barre de navigation est toujours en haut?

Answer 1

new Vue({
  el: "#app",
  data:{
      active: false
  },
  methods: {
    toggleNavClass(){
        if(this.active == false){
          return 'nav'
        } else {
          return 'sticky-nav'
        }

    }
  },
  mounted(){
  window.document.onscroll = () => {
      let navBar = document.getElementById('nav');
      if(window.scrollY > navBar.offsetTop){
        this.active = true;
        } else {
        this.active = false;
      }
    }
  }
})

/*scrollY returns the scroll amount in pixels.
offsetTop is the px difference between the navBar and closest parent element*/

body {
  margin: 0;
  box-sizing: border-box;
}

#app {
  color: #2c3e50;
  background-color: #ccd6dd;
  height: 120vh;
}

a {
  font-weight: bold;
  color: white;
  text-decoration: none;
  margin: 0 1vw;
}

a:hover {
  transition: linear 100ms;
  color: red;
}

/* two classes, decided on scroll */
.nav {
  transition: 100ms;
  padding: 25px;
}

.sticky-nav{
  transition: 100ms;
  padding: 20px;
}

#nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #55acee;
  position: fixed;
  top: 0;
}

/* have to add the ID nav (#nav) otherwise the backgrnd color won't change as the previous background color is set in an ID and ID trumps class notation */
#nav.sticky{
  transition: 150ms;
  box-shadow: 0px 15px 10px -15px #111;
  background-color:  #ccd6dd;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <div id="nav" :class="{sticky:active}"> 
      <div id="nav-container" :class="toggleNavClass()"><a href="#">Menu</a>
    </div>
      <router-view />
</div>

Je viens de construire un site en utilisant Vue. C'est mon code