Как сделать Фиксированный navbar с vue js?

Question

введите описание изображения здесь

Я пытаюсь создать целевую страницу, используя vue.js, с дизайном заголовка, как на картинке выше.

Итак, я создаюкомпонент, называемый "заголовок", с содержимым содержимого в соответствии с дизайном.

Как сделать фиксированную панель навигации, когда страница прокручивается, панель навигации все еще находится сверху?

Answer 1

Другим вариантом может быть использование пакета bootstrap-vue .

Имеет компонент b-navbar , который может быть прикреплен к сверху

<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>

Answer 2

Вы можете установить фиксированную панель навигации, применив следующий класс.

.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; не изменяется при прокрутке окна, поэтому элемент с фиксированным позиционированием останется правым.