如何使用 vue js 制作固定导航栏？

Question

enter image description here

I try build a landing page using vue.js, with header design like on the picture above.

So, I create a component called "header",with contain content according to the design.

How do I make a fixed navbar, when the page is scrolled the navbar is still on top ?

Answer 1

Another option could be to use the bootstrap-vue package.

It has the b-navbar component which can be made fixed to the top

<b-navbar class="header" fixed="top"></b-navbar>

Example:

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

 <link href="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" rel="stylesheet"/><link href="http://unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="http://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script><script src="http://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script><div id="app"> <!-- ************************************ --> <!-- Place the fixed prop within b-navbar --> <!-- ************************************ --> <b-navbar class="header" type="dark" variant="info" fixed="top"> <b-navbar-brand href="#"> My fixed header </b-navbar-brand> </b-navbar> <!-- *********************************** --> <div style="margin-top: 60px;"><ol><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li><li>link</li></ol></div></div>

Answer 2

You can set a fixed navbar by applying the following class.

.header {
  position:fixed; /* fixing the position takes it out of html flow - knows
                   nothing about where to locate itself except by browser
                   coordinates */
  left:0;           /* top left corner should start at leftmost spot */
  top:0;            /* top left corner should start at topmost spot */
  width:100vw;      /* take up the full browser width */
  z-index:200;  /* high z index so other content scrolls underneath */
  height:100px;     /* define height for content */
}

An element with position:fixed; property doesn't change when the window is scrolled, so a fixed positioned element will stay right.

Answer 3

 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>

I just built a site using Vue. This is my code