Липкий верх Navbar не работает, когда внутри углового приложения - PullRequest
Новая
       19

Липкий верх Navbar не работает, когда внутри углового приложения

0 голосов
/ 26 июня 2019

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


<!-- Content Within Body -->

<!-- Brand Logo -->
<div class="container-fluid">
    <a class="navbar-brand" href="#">
        <img src="" width="150" height="30" class="d-inline-block align-top" alt="" style="margin: 20px;margin-left:0px;">
    </a>
</div>

<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top navbar card-bordered sticky-top navbar-expand-lg navbar-light pb-0 pt-0">

    ....
    ....

</nav>

Когда то же самое выше помещено в угловой компонент, панель навигации больше не является липкой.Я изучил его и обнаружил, что angular добавляет тег до и после html, поэтому новая структура будет выглядеть так: 

<!-- Notice the newly added tag -->
<app-navbar>

    <!-- Brand Logo -->
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="" width="150" height="30" class="d-inline-block align-top" alt="" style="margin: 20px;margin-left:0px;">
        </a>
    </div>

    <!-- Navbar -->
    <nav class="navbar navbar-default navbar-fixed-top navbar card-bordered sticky-top navbar-expand-lg navbar-light bg-alt-lvl2 pb-0 pt-0">

        ....
        ....

    </nav>
</app-navbar>

И это предотвращает прилипание навигационной панели.Когда я использовал консоль Chrome и переместил панель навигации за пределы тега app-navbar, он ведет себя правильно, то есть теперь он липкий.Я что-то упускаю?

1 Ответ

0 голосов
/ 26 июня 2019

Это происходит, когда родительский CSS отличается от дочернего.

Добавьте пользовательский класс CSS к тегу app-navbar

HTML : 

<app-navbar class="logo-container">

<!-- Brand Logo -->
<div class="container-fluid">
    <a class="navbar-brand" href="#">
        <img src="" width="150" height="30" class="d-inline-block align-top" alt="" style="margin: 20px;margin-left:0px;">
    </a>
</div>

<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top navbar card-bordered sticky-top navbar-expand-lg navbar-light bg-alt-lvl2 pb-0 pt-0">

    ....
    ....

</nav>
</app-navbar>

style.css 

.logo-container {
    position: sticky;
    display: block;
 }
...