Question

在页面顶部时，我想在导航栏上方列出电话号码和电子邮件。但是，当您开始向下滚动时，我希望电话号码和电子邮件消失，仅显示导航栏。我尝试过使用固定顶盖，但是它总是隐藏电话/电子邮件。

如何在所有设备尺寸上实现这一目标？

我正在使用Bootstrap 4。

<body class="d-flex flex-column h-100">

    <header>

        <div class="container">

            <div class="float-right mt-1">
                <a href="mailto:info@example.com" class="ml-4 text-dark"><i class="fas fa-envelope"></i><span class="ml-1 text-dark d-none d-sm-inline">info@example.com</span></a>
                <a href="tel:1-555-555-5555" class="ml-4 text-dark"><i class="fas fa-phone-alt"></i><span class="ml-1 d-none d-sm-inline">+1 (555) 555-5555</span></a>
            </div>

            <br>

            <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-white mt-1">
                <a class="navbar-brand" href="#">Example</a>
            </nav>

        </div>

    </header>

Answer 1

您应该能够将.sticky-top类添加到nav元素中，并且当您在页面上滚动时，它应该是顶部的唯一项。

<nav class="sticky-top navbar navbar-expand-lg fixed-top navbar-light bg-white mt-1">
  <a class="navbar-brand" href="#">Example</a>
</nav>

向下滚动页面时，如何在其上方隐藏div的粘性/固定导航栏？

1 个答案: