BootstrapVue: Создание 2 навигационных панелей с нижним навигационным панелью, который придерживается вершины? - PullRequest
Новая
       0

BootstrapVue: Создание 2 навигационных панелей с нижним навигационным панелью, который придерживается вершины?

2 голосов
/ 28 марта 2020

Я пытаюсь создать 2 панели навигации. Первый (верхняя панель навигации) - это просто бренд (lo go). Второй (нижняя панель навигации) - это меню навигации. Когда пользователь прокручивает страницу вниз, я хочу, чтобы верхняя панель навигации прокручивалась за пределы экрана, но я хочу, чтобы 2-я (нижняя) панель навигации оставалась фиксированной в верхней части экрана. Я настроил каждую панель навигации как отдельный компонент.

Хороший пример такого поведения можно найти на Reason.com: ссылка

Я очень запутался, как это реализовать. Я могу сделать: 

<b-navbar toggleable="lg" class="header" fixed="top">

Чтобы панель навигации оставалась в верхней части экрана. Это хорошо работает, если я хочу, чтобы 1-я навигационная панель оставалась наверху, а не 2-я. Тем не менее, это не работает для моей ситуации.

В документах упоминается размещение для панели навигации. Единственный другой вариант (кроме fixed = "top") - установить позицию div в «липкое» в css: 

position: sticky

Однако это влияет только на него внутри div. Поскольку у меня есть несколько компонентов, я не уверен, как правильно реализовать это в Vue, так как я не могу перенести один div из одного компонента в другой.

Как я мог бы go сделать это?

1 Ответ

3 голосов
/ 28 марта 2020

Я играл с кодами BootstrapVue. Я просто положил 

<b-navbar>
....
</b-navbar>

<b-navbar sticky>
....
</b-navbar>

и смог повторить это поведение.

Редактировать:

Ссылка , если вы хотите его увидеть.

...