Как сделать Fixed navbar с vue js?

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

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

Итак, я создаю компонент под названием «header», содержащий контент в соответствии с дизайном.

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

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


Другим вариантом может быть использование пакета 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> 


Есть идеи?

10000