html - Bootstrap 粘性顶部导航栏在滚动时消失

标签 html css twitter-bootstrap bootstrap-4

导航栏一直停留在顶部,直到我滚动出英雄形象然后消失。我希望导航栏出现在整个页面中。有任何想法吗?

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About Me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#projects">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact Me</a>
                </li>
            </ul>
        </div>
    </nav>
<!--Navbar end-->

<!-- Homescreen hero -->
    <div class="hero-image" id="home">
        <div class="hero-text">
            <h1 class="name">Text</h1>
            <h1>Text</h1>
        </div>
    </div>

最佳答案

您可以尝试使用fixed-top 而不是sticky-top

我不知道您使用的是哪种浏览器,但文档指出 另请注意 .sticky-top 使用 position: sticky,并非所有浏览器都完全支持它。( https://getbootstrap.com/docs/4.2/components/navbar/#placement )

关于html - Bootstrap 粘性顶部导航栏在滚动时消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54135081/

相关文章:

javascript - 带文字功能的动画

javascript - 将表格字段更改为仅显示

html - 展开包含内容的框

html - Bootstrap - 在鼠标悬停时更改图标图像

ruby-on-rails - 即使在成功安装后也会出现恼人的 libv8 错误

jquery - 如何让 Twitter Bootstrap 与 prototype.js 一起工作?

javascript - 无法调用函数

html - CSS 外部文件不起作用

html - CSS ONLY 动画绘制带有边框半径和透明背景的圆

html - 无法让搜索框拉伸(stretch)到一定宽度