Question

我正在构建一个顶部带有粘性导航栏的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在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标签外部时，它的行为正确，即现在是粘性的。我有什么想念的吗？

Answer 1

当父CSS与子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;
 }

在Angular应用程序中时，Navbar粘性顶部不起作用

1 个答案: