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

Posted 2023-02-18

【中文标题】如何使用 vue js 制作固定导航栏？

【英文标题】：How to make Fixed navbar with vue js?

【发布时间】：2019-04-19 10:29:26

【问题描述】：

enter image description here

我尝试使用 vue.js 构建一个登陆页面，标题设计如上图所示。

所以，我创建了一个名为“header”的组件，根据设计包含内容。

如何制作固定导航栏，当页面滚动时导航栏仍然在顶部？

【参考方案1】：

您可以通过应用以下类来设置固定导航栏。

.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 */

具有position:fixed; 属性的元素在窗口滚动时不会改变，因此固定定位的元素将保持在右侧。

【讨论】：

@Augusto 这是纯 CSS。它应该不受前端框架的影响。

【参考方案2】：

另一种选择是使用bootstrap-vue 包。

它有b-navbar 组件，可以固定到 top

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

例子：

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>

【参考方案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>

我刚刚使用 Vue 构建了一个网站。 这是我的代码