在有角度的应用程序中导航栏粘性顶部不起作用答案

【问题标题】：Navbar sticky top not working when inside an angular app在有角度的应用程序中导航栏粘性顶部不起作用
【发布时间】：2019-11-08 00:25:21
【问题描述】：

我正在构建一个顶部带有粘性导航栏的 Web 应用程序。导航栏的方式是在导航栏上方存在品牌徽标。因此，当页面最初加载时，用户会看到一个品牌徽标，其下方是导航栏。当用户滚动时，徽标 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 组件中时，导航栏不再具有粘性。我查看了它，发现 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 标签之外时，它的行为正确，即它现在是粘性的。有什么我想念的吗？

【问题讨论】：

您是否正确导入了引导 CSS 文件？
您能否尝试在stackblitz 上重现此内容。然后其他人可以更好地了解您的错误上下文并给出适当的解决方案。

标签： html angular bootstrap-4 navbar

【解决方案1】：

当父 CSS 与子 CSS 不同时会发生这种情况。

在app-navbar 标签中添加自定义 CSS 类

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

【讨论】：