在Angular应用程序中，Navbar Sticky Top无法正常工作

Question

im在顶部构建带有粘性磁带的Web应用程序。Navbar的方式使Navbar上方有一个品牌徽标。因此，当页面最初加载时，用户在Navbar下方看到一个品牌徽标。当用户滚动时，徽标div向上移动(从视口出去(，并且只有Navbar才能粘在顶部。我能够使用以下代码来实现这一目标：

<!-- 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>

将上面的同一内容放入角度组件中时，Navbar不再粘。我研究了它，发现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控制台并将Navbar移动到App-Navbar标签之外时，它的行为正确，即现在很粘。我缺少什么吗？

Answer 1

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